/* Perpendicular - portefolio online | estilo (cores do logotipo e da papelaria PArq_2026) */
:root{
  /* cores tiradas do logotipo e da papelaria PArq_2026 */
  --ciano:#1bb4e6; --azul:#0b4f8a; --azul-escuro:#123a5c; --verde:#0e9447; --lima:#a6ce39;
  --texto:#2f3033; --texto-2:#5d6066; --linha:#e6e8eb; --fundo:#ffffff; --fundo-2:#f5f7f8;
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --raio:14px; --max:1180px; --gutter:clamp(16px,4vw,40px);
  --f-titulo:"Red Hat Display",system-ui,sans-serif; --f-texto:"Red Hat Text",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--fundo);color:var(--texto);font:400 17px/1.6 var(--f-texto);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--f-titulo);letter-spacing:-0.02em;line-height:1.1;margin:0;color:#1f2023}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.eyebrow{font:600 13px/1 var(--f-titulo);letter-spacing:.14em;text-transform:uppercase;color:var(--azul)}

/* ---------- cabecalho ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color 200ms ease}
header.com-sombra{border-bottom-color:var(--linha)}
.barra{display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px}
.barra .logo img{height:34px;width:auto}
nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
nav a{text-decoration:none;font:500 15px/1 var(--f-titulo);color:var(--texto-2);transition:color 150ms ease}
@media (hover:hover) and (pointer:fine){nav a:hover{color:var(--azul)}}

/* ---------- botoes ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;border-radius:999px;font:600 15px/1 var(--f-titulo);text-decoration:none;border:0;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:transform 160ms var(--ease-out),background-color 200ms ease,box-shadow 200ms ease}
.btn:active{transform:scale(.97)}
.btn-primario{background:var(--azul);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 6px 18px -8px rgba(11,79,138,.6)}
.btn-secundario{background:var(--fundo-2);color:var(--texto)}
@media (hover:hover) and (pointer:fine){.btn-primario:hover{background:#0a5ea6}.btn-secundario:hover{background:#eceff1}}
.btn svg{width:18px;height:18px;flex:none}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}

/* ---------- topo ---------- */
.topo{padding-top:clamp(40px,7vw,88px);padding-bottom:clamp(32px,5vw,56px)}
.topo .grelha{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.topo h1{font-size:clamp(38px,5.6vw,64px);font-weight:700;margin:16px 0 20px}
.topo h1 span{background:linear-gradient(90deg,var(--azul),var(--verde));-webkit-background-clip:text;background-clip:text;color:transparent}
.topo .lead{font-size:clamp(17px,1.6vw,19px);color:var(--texto-2);max-width:32em}
.topo .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.topo figure{margin:0;position:relative;border-radius:var(--raio);overflow:hidden;background:var(--fundo-2);aspect-ratio:16/10}
.topo figure img{width:100%;height:100%;object-fit:cover}
.topo figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);border-radius:999px;padding:6px 12px;font:500 13px/1.2 var(--f-titulo);color:var(--texto)}
.promessas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:clamp(32px,5vw,56px);padding:0;list-style:none}
.promessas li{background:var(--fundo-2);border-radius:var(--raio);padding:18px 20px;font-size:15px;color:var(--texto-2)}
.promessas strong{display:block;font:600 17px/1.3 var(--f-titulo);color:var(--texto);margin-bottom:4px}

/* entrada do topo: so na primeira visita da pagina, curta e em escada */
.entra{opacity:0;transform:translateY(10px);animation:entra 600ms var(--ease-out) forwards}
.entra:nth-child(2){animation-delay:60ms}.entra:nth-child(3){animation-delay:120ms}.entra:nth-child(4){animation-delay:180ms}
@keyframes entra{to{opacity:1;transform:none}}

/* faixa de triangulos da papelaria */
.faixa{height:10px;background:linear-gradient(90deg,var(--azul-escuro) 0%,var(--azul) 25%,var(--ciano) 45%,var(--verde) 72%,var(--lima) 100%)}

/* ---------- seccoes ---------- */
section{padding:clamp(56px,9vw,112px) 0}
.cabeca{max-width:46em;margin-bottom:clamp(28px,4vw,48px)}
.cabeca h2{font-size:clamp(30px,3.8vw,44px);font-weight:700;margin:12px 0 14px}
.cabeca p{color:var(--texto-2)}
.cinza{background:var(--fundo-2)}

/* ---------- trabalhos ---------- */
.trabalho{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start;padding:clamp(28px,4vw,40px) 0;border-top:1px solid var(--linha)}
.trabalho:first-of-type{border-top:0;padding-top:0}
.trabalho .texto{position:sticky;top:96px}
.trabalho h3{font-size:clamp(24px,2.6vw,32px);font-weight:700;margin:10px 0 12px}
.etiquetas{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.etiquetas li{font:500 13px/1 var(--f-titulo);padding:7px 11px;border-radius:999px;background:#e8f3fb;color:var(--azul)}
.etiquetas li.estado{background:#e7f5ec;color:#0b7a3b}
.trabalho .texto p{color:var(--texto-2);margin-top:14px}
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.galeria button{all:unset;cursor:zoom-in;border-radius:10px;overflow:hidden;background:var(--fundo-2);aspect-ratio:4/3;position:relative;touch-action:manipulation}
.galeria button:first-child{grid-column:1/-1;aspect-ratio:16/9}
.galeria button img{width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease-out)}
.galeria button:active img{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.galeria button:hover img{transform:scale(1.03)}}
.galeria button:focus-visible{outline:2px solid var(--ciano);outline-offset:2px}
.obra{margin-top:22px}
.obra h4{font:600 15px/1.3 var(--f-titulo);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.obra h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--verde)}
.obra .galeria button:first-child{grid-column:auto;aspect-ratio:4/3}
.nota{font-size:14px;color:var(--texto-2);margin-top:28px}

/* ---------- servicos ---------- */
.linhas{display:flex;gap:6px;background:#fff;border:1px solid var(--linha);border-radius:999px;padding:5px;width:max-content;max-width:100%;margin-bottom:28px;overflow-x:auto;scrollbar-width:none}
.linhas::-webkit-scrollbar{display:none}
.linhas button{all:unset;cursor:pointer;padding:10px 18px;border-radius:999px;font:600 15px/1 var(--f-titulo);color:var(--texto-2);white-space:nowrap;transition:background-color 200ms ease,color 200ms ease;touch-action:manipulation}
.linhas button[aria-selected="true"]{background:var(--azul);color:#fff}
.linhas button:focus-visible{outline:2px solid var(--ciano);outline-offset:2px}
.painel[hidden]{display:none}
.pacotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pacote{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:26px 24px;display:flex;flex-direction:column}
.pacote.destaque{border-color:var(--azul);box-shadow:0 18px 40px -28px rgba(11,79,138,.55)}
.pacote .tag{font:600 12px/1 var(--f-titulo);letter-spacing:.1em;text-transform:uppercase;color:var(--verde)}
.pacote h3{font-size:22px;margin:10px 0 6px}
.pacote .para{font-size:15px;color:var(--texto-2);min-height:3.2em}
.preco{font:700 30px/1.1 var(--f-titulo);color:#1f2023;margin:18px 0 2px;font-variant-numeric:tabular-nums}
.preco small{font:500 14px/1 var(--f-texto);color:var(--texto-2)}
.conta{font-size:13px;color:var(--texto-2)}
.pacote ul{list-style:none;margin:18px 0 0;padding:0;font-size:15px;display:grid;gap:8px}
.pacote li{padding-left:24px;position:relative}
.pacote li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:rotate(-45deg)}
.pacote li.nao{color:var(--texto-2)}
.pacote li.nao::before{border:0;height:2px;width:11px;background:#b9bec4;top:.75em;transform:none}
.pacote .prazo{margin-top:auto;padding-top:18px;font-size:14px;color:var(--texto-2)}
.rodape-precos{font-size:14px;color:var(--texto-2);margin-top:18px}

/* ---------- processo ---------- */
.passos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;margin:0;padding:0;counter-reset:passo}
.passos li{border-top:3px solid var(--linha);padding-top:18px;counter-increment:passo}
.passos li:nth-child(1){border-color:var(--azul)}.passos li:nth-child(2){border-color:var(--ciano)}.passos li:nth-child(3){border-color:var(--verde)}.passos li:nth-child(4){border-color:var(--lima)}
.passos li::before{content:"0" counter(passo);font:700 14px/1 var(--f-titulo);color:var(--texto-2)}
.passos h3{font-size:20px;margin:10px 0 8px}
.passos p{font-size:15px;color:var(--texto-2)}
.pagamentos{display:grid;grid-template-columns:30fr 40fr 30fr;margin-top:40px;border-radius:12px;overflow:hidden;font:600 14px/1.3 var(--f-titulo)}
.pagamentos div{padding:14px 16px;color:#fff}
.pagamentos div span{display:block;font:400 13px/1.3 var(--f-texto);opacity:.9}
.pagamentos div:nth-child(1){background:var(--azul)}.pagamentos div:nth-child(2){background:#0f7fa8}.pagamentos div:nth-child(3){background:var(--verde)}

/* ---------- contacto ---------- */
.contacto{background:var(--azul-escuro);color:#e9f1f8}
.contacto h2{color:#fff}
.contacto .cabeca p{color:#b9cde0}
.contacto .grelha{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.contacto dl{display:grid;grid-template-columns:auto 1fr;gap:12px 20px;margin:0;font-size:16px}
.contacto dt{color:#8fb0cc;font:500 14px/1.6 var(--f-titulo)}
.contacto dd{margin:0}
.contacto .btn-primario{background:var(--verde);box-shadow:none}
@media (hover:hover) and (pointer:fine){.contacto .btn-primario:hover{background:#0c7f3d}}
.falta{display:inline-block;background:rgba(255,255,255,.12);border-radius:6px;padding:0 8px;font-size:14px}
footer{background:#0d2b45;color:#8fb0cc;font-size:14px;padding:22px 0 max(22px,env(safe-area-inset-bottom))}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- revelacao ao fazer scroll (uma vez) ---------- */
.revela{opacity:0;transform:translateY(14px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.revela.visivel{opacity:1;transform:none}
.revela-img{clip-path:inset(0 0 100% 0);transition:clip-path 900ms var(--ease-in-out)}
.revela-img.visivel{clip-path:inset(0 0 0 0)}

/* ---------- galeria ampliada ---------- */
dialog.lb{border:0;padding:0;margin:auto;background:transparent;max-width:min(1200px,94vw);width:100%;overflow:visible;opacity:1;transform:none;transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out),overlay 220ms allow-discrete,display 220ms allow-discrete}
@starting-style{dialog.lb[open]{opacity:0;transform:scale(.96)}}
dialog.lb.fecha{opacity:0;transform:scale(.98);transition-duration:150ms}
dialog.lb::backdrop{background:rgba(10,22,34,.82);transition:opacity 220ms ease}
dialog.lb figure{margin:0}
dialog.lb img{width:100%;max-height:78vh;object-fit:contain;border-radius:10px;background:#111}
dialog.lb figcaption{color:#dfe7ee;font:500 14px/1.4 var(--f-titulo);margin-top:10px;display:flex;justify-content:space-between;gap:12px}
.lb-n{white-space:nowrap;font-variant-numeric:tabular-nums}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#1f2023;display:grid;place-items:center;cursor:pointer;touch-action:manipulation;transition:transform 160ms var(--ease-out)}
.lb-btn:active{transform:translateY(-50%) scale(.94)}
.lb-ant{left:-14px}.lb-seg{right:-14px}
.lb-fechar{position:absolute;top:-56px;right:0;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:24px;cursor:pointer}
.lb-btn svg{width:20px;height:20px}

/* ---------- telemovel ---------- */
@media (max-width:900px){
  nav{display:none}
  .topo .grelha,.trabalho,.contacto .grelha{grid-template-columns:1fr}
  .topo figure{order:-1}
  .trabalho .texto{position:static}
  .pacotes{grid-template-columns:1fr}
  .pacote .para{min-height:0}
  .passos{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  body{font-size:16px}
  .promessas{grid-template-columns:1fr}
  .passos{grid-template-columns:1fr}
  .galeria{gap:8px}
  .barra .btn{min-height:40px;padding:0 16px;font-size:14px}
  .barra .logo img{height:28px}
  .pagamentos{grid-template-columns:1fr}
  .lb-ant{left:6px}.lb-seg{right:6px}
  .lb-fechar{top:-52px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .entra,.revela,.revela-img{animation:none;opacity:1;transform:none;clip-path:none;transition:opacity 200ms ease}
  dialog.lb,dialog.lb.fecha{transform:none;transition:opacity 150ms ease}
  @starting-style{dialog.lb[open]{transform:none}}
  .galeria button img{transition:none}
}

/* ================= v02 (2026-11-11) ================= */
nav a[aria-current]{color:var(--azul)}
nav a{position:relative;padding:8px 0}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--azul);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform 220ms var(--ease-out)}
nav a[aria-current]::after{transform:scaleX(1)}

/* ---------- comparador antes / projeto ---------- */
.compara{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--fundo-2);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.compara img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.compara-antes{position:absolute;inset:0;clip-path:inset(0 50% 0 0);will-change:clip-path}
.compara-pega{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.compara-pega span{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.28);display:grid;place-items:center;transition:transform 160ms var(--ease-out)}
.compara-pega span::before{content:"‹ ›";font:700 17px/1 var(--f-titulo);color:var(--azul);letter-spacing:1px;margin-top:-2px}
.compara.a-arrastar .compara-pega span{transform:scale(.92)}
.compara-pega:focus-visible{outline:none}
.compara-pega:focus-visible span{outline:2px solid var(--ciano);outline-offset:3px}
.compara-rot{position:absolute;bottom:10px;background:rgba(255,255,255,.92);border-radius:999px;padding:5px 11px;font:500 12px/1.2 var(--f-titulo);color:var(--texto);pointer-events:none}
.compara-rot.esq{left:10px}.compara-rot.dir{right:10px}

/* ---------- assistente de pacote ---------- */
.assistente{background:var(--fundo-2);border-radius:20px;padding:clamp(22px,3.4vw,36px);margin-bottom:clamp(32px,5vw,56px);display:grid;grid-template-columns:minmax(200px,.8fr) 2fr;gap:clamp(20px,4vw,48px);align-items:start}
.ass-lado h3{font-size:clamp(22px,2.4vw,28px);margin:10px 0 10px}
.ass-lado p{color:var(--texto-2);font-size:15px}
.ass-pontos{display:flex;gap:6px;margin-top:18px}
.ass-pontos i{width:28px;height:4px;border-radius:4px;background:#d9dee3;transition:background-color 240ms ease}
.ass-pontos i.feito{background:var(--azul)}
.ass-corpo{min-height:250px}
.ass-titulo{font-size:clamp(20px,2.2vw,26px);margin:0 0 16px;outline:none}
.ass-opcoes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ass-opcao{all:unset;box-sizing:border-box;cursor:pointer;background:#fff;border:1px solid var(--linha);border-radius:14px;padding:16px 18px;display:block;touch-action:manipulation;transition:transform 160ms var(--ease-out),border-color 160ms ease,box-shadow 200ms ease}
.ass-opcao strong{display:block;font:600 16px/1.3 var(--f-titulo);color:#1f2023}
.ass-opcao span{display:block;font-size:14px;color:var(--texto-2);margin-top:4px}
.ass-opcao:active{transform:scale(.98)}
.ass-opcao:focus-visible{outline:2px solid var(--ciano);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.ass-opcao:hover{border-color:var(--azul);box-shadow:0 10px 24px -18px rgba(11,79,138,.6)}}
.ass-voltar{all:unset;cursor:pointer;margin-top:16px;font:500 14px/1 var(--f-titulo);color:var(--texto-2);padding:8px 0}
.ass-voltar:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.ass-voltar:hover{color:var(--azul)}}
.ass-rot{font:600 12px/1 var(--f-titulo);letter-spacing:.1em;text-transform:uppercase;color:var(--verde);margin-bottom:8px}
.ass-corpo .ass-rot + .ass-titulo{margin-bottom:6px}
.ass-porque{color:var(--texto-2);max-width:38em}
.ass-preco{font:700 clamp(30px,3.6vw,40px)/1.1 var(--f-titulo);color:#1f2023;margin:16px 0 4px;font-variant-numeric:tabular-nums}
.ass-conta{font-size:14px;color:var(--texto-2)}
.ass-plano{display:grid;grid-template-columns:30fr 40fr 30fr;gap:2px;margin-top:16px;border-radius:12px;overflow:hidden}
.ass-plano div{padding:12px 14px;color:#fff;background:var(--azul)}
.ass-plano div:nth-child(2){background:#0f7fa8}.ass-plano div:nth-child(3){background:var(--verde)}
.ass-plano b{display:block;font:700 16px/1.2 var(--f-titulo);font-variant-numeric:tabular-nums;white-space:nowrap}
.ass-plano span{display:block;font-size:12.5px;opacity:.92;margin-top:2px}
.ass-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.assistente .btn-secundario{background:#fff;border:1px solid var(--linha)}

/* ---------- contacto: ligacoes ---------- */
.contacto dd a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);transition:border-color 150ms ease}
@media (hover:hover) and (pointer:fine){.contacto dd a:hover{border-color:#fff}}

/* ---------- barra fixa (so telemovel) ---------- */
.barra-fixa{display:none}
@media (max-width:900px){
  .assistente{grid-template-columns:1fr}
  .ass-corpo{min-height:0}
  .barra-fixa{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:55;padding:10px max(16px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--linha);transform:translateY(100%);transition:transform 260ms var(--ease-out)}
  .barra-fixa.visivel{transform:none}
  .barra-fixa .btn{flex:1;min-height:48px}
  .barra-fixa .btn-secundario{flex:0 0 auto;padding:0 18px}
  footer{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:560px){
  .ass-opcoes{grid-template-columns:1fr}
  .ass-plano{grid-template-columns:1fr}
  .ass-acoes .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  nav a::after,.barra-fixa,.ass-opcao,.compara-pega span{transition:none}
}

/* galerias com 3 imagens: a grande + duas miniaturas a toda a largura */
.galeria:has(button:nth-child(3):last-child){grid-template-columns:1fr 1fr}
.obra .galeria:has(button:nth-child(2):last-child){grid-template-columns:1fr 1fr}
dialog.lb img{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;cursor:grab}
dialog.lb img:active{cursor:grabbing}