/* =========================================================
   Rofi Studio — página inicial editorial (direção aprovada a 06/11/2026)
   Só a página inicial carrega este ficheiro. Papel branco quente no lugar
   da névoa, cantos retos, etiquetas em Hanken Grotesk e o violeta só no fim.
   ========================================================= */


html:has(main.ed){--papel:#F9F7F2;--papel-2:#EFEBE3;--linha:#E3DDD2;--f-mono:var(--f-body)}
html:has(main.ed) body{background:var(--papel)}
html:has(main.ed) .topo[data-tema="claro"]{--fundo:rgba(249,247,242,.88)}

.ed{color:var(--texto)}
.ed *{border-radius:0}
.ed .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ed-w{max-width:1280px;margin:0 auto;padding-inline:clamp(20px,5vw,56px)}
.ed-et{font:600 12px/1.35 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.ed-suave{color:var(--suave)}
.ed-h2{font:400 clamp(40px,5vw,68px)/1 var(--f-display);letter-spacing:-.015em;margin:14px 0 0;text-wrap:balance}
.ed-h2 em{font-style:normal;color:var(--laranja)}
.ed-btn{display:inline-block;font:600 12.5px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;padding:16px 22px;text-decoration:none;border-radius:0;transition:transform .35s var(--ease),background-color .3s,color .3s}
.ed-btn-l{background:var(--laranja);color:#fff}
.ed-btn-n{background:var(--noite);color:#fff}
.ed-btn:hover,.ed-btn:focus-visible{background:var(--texto);color:#fff}
.ed-seta-p{display:inline-flex;gap:12px;align-items:center;margin-top:40px;font:600 12.5px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:6px}
.ed-seta-p span,.ed-seta span{color:var(--laranja);transition:transform .35s var(--ease)}
.ed-seta-p:hover span,.ed-seta:hover span{transform:translateX(6px)}

/* imagens: abrem como uma cortina e afastam-se ao entrar (movimentos 8 e 13) */
.ed-img{display:block;position:relative;overflow:hidden;background:var(--papel-2)}
.ed-img img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0}
.ed-img [data-l]{display:contents}

/* capas: fotografia real; enquanto não houver, o trabalho inteiro pousado no papel (decisão de 06/11/2026) */
.ed-papel{background:var(--papel-2)}
.ed-papel img{object-fit:contain;padding:7%}

/* pessoas e bastidores a preto e branco (direção de 06/11/2026) */
.ed-pb img{filter:grayscale(1) contrast(1.05)}

/* topo */
.ed-topo{padding:calc(var(--topo) + clamp(56px,8vw,110px)) 0 clamp(48px,6vw,76px)}
.ed-h1{font:400 clamp(54px,8.6vw,128px)/.98 var(--f-display);letter-spacing:-.02em;margin:0}
.ed-ln{display:block;overflow:hidden;padding-bottom:.05em}
.ed-ln>span{display:block}
.ed-h1 em{font-style:normal;color:var(--laranja)}
.ed-janela{display:inline-block;position:relative;width:2.1em;height:.78em;vertical-align:-.04em;margin:0 .16em;overflow:hidden;background:var(--papel-2)}
.ed-janela img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .7s var(--ease),transform 1.6s var(--ease)}
.ed-janela img.on{opacity:1;transform:none}
.ed-topo-pe{display:flex;justify-content:space-between;align-items:end;gap:32px 48px;flex-wrap:wrap;margin-top:clamp(36px,5vw,64px)}
.ed-topo-pe p{margin:0;font-size:clamp(17px,1.5vw,20px);max-width:38ch}
.ed-troca{display:block;height:1.3em;overflow:hidden;font:400 1.6em/1.3 var(--f-display);color:var(--laranja)}
.ed-troca>span{display:block;transition:transform .7s var(--ease)}
.ed-troca i{display:block;font-style:normal;height:1.3em}
.ed-botoes{display:flex;gap:12px;flex-wrap:wrap}

/* faixa contínua (movimento 10) */
.ed-faixa{border-block:1px solid var(--linha);overflow:hidden;white-space:nowrap;padding:18px 0}
.ed-faixa-in{display:inline-block;font:400 clamp(28px,3vw,40px)/1 var(--f-display);will-change:transform}
.ed-faixa-in b{font-weight:400;color:var(--laranja);margin:0 .5em}

/* projetos desencontrados */
.ed-proj{padding:clamp(72px,9vw,110px) 0}
.ed-cab{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:clamp(28px,4vw,44px)}
.ed-cab .ed-h2{margin:0}
.ed-grelha{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;row-gap:56px}
.ed-p{display:block;color:inherit;text-decoration:none}
.ed-p1{grid-column:1/8}.ed-p1 .ed-img{aspect-ratio:4/3}
.ed-p2{grid-column:9/13;margin-top:160px}.ed-p2 .ed-img{aspect-ratio:4/5}
.ed-p3{grid-column:3/9}.ed-p3 .ed-img{aspect-ratio:4/3}
.ed-leg{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px}
.ed-leg b{font:400 26px/1.1 var(--f-display)}
.ed-leg .ed-et{color:var(--suave)}
.ed-p:hover .ed-leg b{color:var(--laranja)}
.ed-prova{display:grid;grid-template-columns:5fr 7fr;gap:24px 56px;align-items:end;border-top:1px solid var(--linha);margin:clamp(56px,7vw,90px) 0 0;padding-top:40px}
.ed-num{display:flex;align-items:baseline;gap:22px}
.ed-num strong{font:400 clamp(96px,11vw,150px)/.85 var(--f-display);color:var(--laranja)}
.ed-num span{font-size:18px;max-width:22ch}
.ed-prova blockquote{margin:0}
.ed-prova blockquote p{font:400 clamp(22px,2.2vw,30px)/1.3 var(--f-display);margin:0 0 14px}
.ed-prova figcaption{color:var(--suave)}

/* sobre: a Renata recortada, maior do que a secção (como o Kevin Luna), ficha e polaroides */
.ed-sobre{background:var(--noite);color:#fff;padding:clamp(90px,9vw,120px) 0 0;position:relative}
.ed-sob{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.ed-rec{position:absolute;left:max(-8vw,-120px);bottom:0;width:min(800px,56vw);margin:0;z-index:4;pointer-events:none}
.ed-rec img{display:block;width:100%;height:auto;filter:none}
.ed-sob-txt{grid-column:2;padding:0 0 70px 48px;position:relative;z-index:2}
.ed-sobre .ed-suave{color:rgba(255,255,255,.65)}
.ed-sobre .ed-h2{white-space:nowrap}
.ed-sobre .ed-h2 em{color:var(--laranja-claro)}
.ed-lead{font-size:clamp(18px,1.5vw,21px);margin:20px 0 0;max-width:44ch;color:rgba(255,255,255,.85)}
.ed-ficha{display:grid;grid-template-columns:1.35fr 1fr .8fr 1.25fr;gap:24px;margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.2)}
.ed-ficha h3{font:600 12px/1.4 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--laranja-claro);margin:0 0 10px}
.ed-ficha p{margin:0 0 10px;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.8)}
.ed-ficha p b{display:block;color:#fff;font-weight:600}
.ed-pols{display:flex;gap:18px;position:absolute;right:12px;bottom:-166px;align-items:flex-start;z-index:5}
.ed-pol{margin:0;background:#F9F7F2;padding:9px 9px 30px;width:170px;box-shadow:0 14px 30px rgba(0,0,0,.35);position:relative}
.ed-pol:nth-child(1){transform:rotate(-4deg)}.ed-pol:nth-child(2){transform:translateY(-132px) rotate(2.5deg);margin-top:18px}.ed-pol:nth-child(3){transform:translateY(-78px) rotate(-1.5deg)}
.ed-pol img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;filter:grayscale(1)}
.ed-pol [data-l]{display:contents}
.ed-pol figcaption{position:absolute;left:10px;bottom:9px;font:600 10px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}

/* o que faço */
.ed-serv{padding:clamp(72px,9vw,110px) 0;border-top:1px solid var(--linha)}
.ed-c3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:clamp(32px,4vw,48px)}
.ed-c3 .ed-img{aspect-ratio:4/3}
.ed-c3 h3{font:400 clamp(32px,3vw,40px)/1 var(--f-display);margin:24px 0 12px}
.ed-c3 p{margin:0 0 22px;color:var(--suave);max-width:30ch}

/* passos */
.ed-passos{padding:clamp(72px,9vw,110px) 0;border-top:1px solid var(--linha);position:relative}
.ed-passos .ed-w{position:relative}
.ed-p4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;margin:clamp(36px,4vw,52px) 0 0;padding:0}
.ed-p4 .ed-img{aspect-ratio:1200/711}
.ed-linha{display:block;height:22px}
.ed-n{display:block;color:var(--laranja);margin:14px 0 10px}
.ed-p4 h3{font:400 clamp(28px,2.6vw,36px)/1 var(--f-display);margin:0 0 10px}
.ed-p4 p{margin:0;font-size:15.5px;color:var(--suave)}
.ed-fio{position:absolute;left:0;width:100%;height:44px;overflow:visible;pointer-events:none}
.ed-fio path{fill:none;stroke:var(--laranja);stroke-width:1.5}
.ed-fio circle{fill:var(--papel);stroke:var(--laranja);stroke-width:1.5}

/* fim: o fundo passa de papel a violeta ao chegar (movimento 1) */
.ed-fim{background:var(--papel);padding:clamp(100px,13vw,170px) 0 clamp(110px,14vw,180px);transition:color .4s}
.ed-fim-t{font:400 clamp(52px,8vw,112px)/.96 var(--f-display);letter-spacing:-.02em;margin:0 0 clamp(28px,4vw,44px);text-wrap:balance}
.ed-fim-t em{font-style:normal;color:var(--laranja)}
.ed-fim.escuro .ed-fim-t em{color:var(--laranja-claro)}
.ed-seta{display:inline-flex;gap:14px;align-items:center;font:400 clamp(26px,2.6vw,36px)/1 var(--f-display);color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:8px;transition:transform .35s var(--ease)}
.ed-onde{margin:clamp(48px,6vw,72px) 0 0;opacity:.75}
.ed-onde a{color:inherit}

/* entradas (movimentos 7, 8 e 13), só com movimento */
@media (prefers-reduced-motion:no-preference){
  .js .ed-ln>span{transform:translateY(105%);transition:transform 1.1s var(--ease)}
  .js .ed-ln:nth-child(2)>span{transition-delay:.14s}
  .js .ed-ln:nth-child(3)>span{transition-delay:.28s}
  .js.ed-pronto .ed-ln>span{transform:none}
  .js .ed .ed-img img{transform:scale(1.12);transition:transform 1.6s var(--ease)}
  .js .ed .ed-img::after{content:"";position:absolute;inset:0;background:var(--papel);transform-origin:top;transition:transform 1.1s var(--ease)}
  .js .ed .ed-vis img{transform:none}
  .js .ed .ed-vis::after{transform:scaleY(0)}
  .js .ed .ed-espera::after,.js .ed .ed-foto::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ed-faixa-in{transform:none!important}
  .ed-troca>span{transition:none}
}

/* telemóvel e tablet */
@media (max-width:900px){
  .ed-grelha{grid-template-columns:1fr 1fr;row-gap:40px}
  .ed-p1{grid-column:1/3}.ed-p2{grid-column:1/2;margin-top:0}.ed-p3{grid-column:2/3;margin-top:80px}
  .ed-p3 .ed-img{aspect-ratio:4/5}
  .ed-prova,.ed-sob{grid-template-columns:1fr}
  .ed-sobre{overflow:visible;min-height:0}.ed-rec{position:relative;left:auto;bottom:auto;top:auto;width:auto;margin:-120px auto 0;max-width:420px}.ed-rec img{width:100%;height:auto}.ed-sob-txt{grid-column:1}
  .ed-ficha{grid-template-columns:1fr 1fr}.ed-sobre .ed-h2{white-space:normal}
  .ed-pols{position:static;margin:36px 0 0;flex-wrap:wrap}.ed-pol:nth-child(n){transform:none;margin-top:0}.ed-sob-txt{padding:0 0 64px}
  .ed-c3{grid-template-columns:1fr}
  .ed-p4{grid-template-columns:1fr 1fr;row-gap:40px}
  .ed-fio{display:none}
  .ed-linha{height:0}
}
@media (max-width:560px){
  .ed-p4{grid-template-columns:1fr}
  .ed-grelha{grid-template-columns:1fr}.ed-p1,.ed-p2,.ed-p3{grid-column:1/-1;margin-top:0}
  .ed-promessas li{grid-template-columns:1fr;gap:4px}
  .ed-cab{flex-direction:column;align-items:flex-start}
}
/* faixa de clientes (aparece sozinha com 3 clientes autorizados): logótipos numa só cor, a cor do texto */
.ed-clientes{padding:44px 0 clamp(110px,10vw,140px)}.ed-clientes[hidden]{display:none!important}
.ed-clientes .ed-w{display:grid;grid-template-columns:1fr 3fr;gap:28px;align-items:center}
.ed-clientes .clientes-lista{grid-column:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:36px 28px;align-items:center;list-style:none;margin:0;padding:0}
.ed-clientes .cliente{background:var(--texto);transform:scale(1.15);transform-origin:left center}.ed-clientes .cliente:hover{background:var(--laranja)}
@media (max-width:900px){.ed-clientes .ed-w{grid-template-columns:1fr}.ed-clientes .clientes-lista{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* loops do «O que faço» (3D, 4 s): o vídeo enche a moldura 4:3; sem movimento pedido, fica a capa parada */
.ed-loop video{display:block;width:100%;height:100%;object-fit:cover;background:#EFEBE3}
/* ── página Projetos (07/11): um caso por linha, imagem e texto a trocar de lado ── */
.ed-topo-pag .ed-et{display:block;margin-bottom:clamp(18px,2.4vw,28px)}
.ed-topo-pag .ed-topo-pe .ed-et{margin:0}
.ed-casos{padding:clamp(16px,3vw,40px) 0 clamp(96px,11vw,150px)}
.ed-lista{list-style:none;margin:0;padding:0;display:grid;gap:clamp(80px,10vw,136px)}
.ed-caso{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.ed-caso-img{grid-column:1/8;grid-row:1;aspect-ratio:16/10}
.ed-caso-txt{grid-column:9/13;grid-row:1;padding-bottom:6px}
.ed-caso:nth-child(even) .ed-caso-img{grid-column:6/13}
.ed-caso:nth-child(even) .ed-caso-txt{grid-column:1/5}
.ed-caso-t{font:400 clamp(34px,3.4vw,48px)/1.02 var(--f-display);letter-spacing:-.01em;margin:16px 0 10px;text-wrap:balance}
.ed-caso-t a{color:inherit;text-decoration:none;transition:color .3s}
.ed-caso-t a:hover{color:var(--laranja)}
.ed-caso-cli{margin:0;color:var(--suave);font-size:15px}
.ed-caso-d{margin:20px 0 0;font-size:16.5px;line-height:1.6;max-width:40ch}
.ed-caso .ed-seta-p{margin-top:28px}
@media (max-width:900px){
  .ed-caso{grid-template-columns:1fr;gap:20px}
  .ed-caso-img,.ed-caso-txt,.ed-caso:nth-child(even) .ed-caso-img,.ed-caso:nth-child(even) .ed-caso-txt{grid-column:1/-1;grid-row:auto}
}
/* ── telemóvel · 07/11 (escolhas da Renata): topo arrumado, Projetos em grelha, «O que faço» e passos a deslizar ── */
@media (max-width:760px){
  .ed-h1{font-size:clamp(40px,11.4vw,48px);line-height:1.02}
  .ed-janela.ed-janela-larga{display:block;width:100%;height:auto;aspect-ratio:16/10;margin:26px 0 0;vertical-align:0}
  .ed-topo-pe{margin-top:26px}
  /* Projetos: o primeiro grande, os outros dois lado a lado */
  .ed-grelha{display:grid;grid-template-columns:1fr 1fr;gap:24px 14px}
  .ed-grelha>.ed-p{grid-column:auto;margin-top:0}
  .ed-grelha>.ed-p:first-child{grid-column:1/-1}
  .ed-grelha>.ed-p .ed-img{aspect-ratio:1/1}
  .ed-grelha>.ed-p:first-child .ed-img{aspect-ratio:16/10}
  .ed-grelha .ed-leg{flex-direction:column;align-items:flex-start;gap:4px}
  .ed-grelha .ed-leg b{font-size:20px}
  /* «O que faço» e os passos: uma fila que se desliza com o dedo; o cartão seguinte espreita à direita */
  .ed-c3,.ed-p4{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-right:calc(-1 * clamp(20px,5vw,56px));padding-right:clamp(20px,5vw,56px);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ed-c3::-webkit-scrollbar,.ed-p4::-webkit-scrollbar{display:none}
  .ed-c3>*,.ed-p4>*{flex:0 0 80%;scroll-snap-align:start}
  .ed-p4 .ed-img{aspect-ratio:1200/711}
  .ed-p4 h3{font-size:26px}
  /* Sobre: as três polaroides lado a lado e ligeiramente rodadas, como no computador */
  .ed-pols{display:flex;flex-wrap:nowrap;gap:10px;margin:36px 0 0;padding-bottom:8px}
  .ed-pol{flex:1 1 0;width:auto;padding:6px 6px 22px}
  .ed-pol:nth-child(1){transform:rotate(-4deg)}
  .ed-pol:nth-child(2){transform:translateY(12px) rotate(3deg)}
  .ed-pol:nth-child(3){transform:rotate(-2deg)}
  .ed-pol figcaption{font-size:9px;letter-spacing:.1em}
}

/* passos ilustrados (07/11/2026): desenho sobre o papel, sem moldura nem corte */
.ed-p4 .ed-ilus{background:transparent;overflow:visible}
.ed-p4 .ed-ilus img{object-fit:contain;width:100%;height:100%;filter:none}