:root{ --red:#ea1f27; --red-dark:#9f151b; --red-stripe:#bb191f; --black:#000; --white:#fff; --grey:#f2f2f2; --font:"coolvetica","Helvetica Neue",Helvetica,Arial,sans-serif; --gutter:clamp(20px,5.5vw,80px); --maxw:1280px; /* geometria do carrossel (proporções do design original) */ --slide-w:33.05%; /* 423 / 1280 */ --slide-h:76.65%; /* 407 / 531 */ --slide-gap:0.43%; /* 5,5 / 1280 */ --slide-scale-x:1.2845; --slide-scale-y:1.3046; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; background:var(--red); color:var(--black); font-family:var(--font); font-weight:500; line-height:1.35; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{display:block;max-width:100%} a{color:inherit} figure,dl,dd,p,h1,h2,h3{margin:0} .wrap{width:100%;max-width:calc(var(--maxw) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)} mark{background:none;color:inherit} .hl-black{background:var(--black);color:var(--red);padding:.02em .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone} .hl-white{background:var(--white);color:var(--red);padding:.02em .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone} .hl-red{background:var(--red);color:var(--white);padding:.02em .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------- aparecimento gradual ---------- Só esconde quando a classe .js existe (posta no ): sem JS, ou se o script falhar, todo o conteúdo fica visível. */ /* O ponto de partida vive numa variável e só duas regras mexem em transform: assim o estado final nunca perde para as variantes por ordem no ficheiro. */ .js [data-reveal]{ --partida:translateY(26px); opacity:0; transform:var(--partida); transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1); } /* barras e faixas: só ganham opacidade, sem sair do sítio */ .js [data-reveal][data-fade]{--partida:none} /* as duas caixas da dualidade entram cada uma do seu lado */ .js [data-reveal][data-from="esquerda"]{--partida:translateX(calc(-1 * clamp(70px,8vw,120px)))} .js [data-reveal][data-from="direita"]{--partida:translateX(clamp(70px,8vw,120px))} .js [data-reveal].is-visible{opacity:1;transform:none} /* segundo elemento de um par entra ligeiramente depois */ .js [data-reveal="2"]{transition-delay:.12s} .js [data-reveal="3"]{transition-delay:.28s} /* ---------- cabeçalho ---------- */ .site-header{padding-block:clamp(24px,3.5vw,50px) 0} .site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px} .logo{width:clamp(96px,9vw,132px);height:auto} .social{display:flex;gap:14px;align-items:center} .social a{display:grid;place-items:center;width:34px;height:34px;transition:opacity .2s} .social a:hover{opacity:.6} .social img{width:clamp(22px,1.9vw,27px);height:auto} /* ---------- hero ---------- */ .hero{text-align:center;padding-block:clamp(32px,4.2vw,60px) clamp(34px,4.5vw,62px)} .hero h1{ font-weight:700; font-size:clamp(36px,6.1vw,88px); line-height:1.05; letter-spacing:-.005em; margin:0 auto; max-width:16ch; text-transform:uppercase; } .hero .kicker{ color:var(--white); font-weight:500; /* Coolvetica Regular */ font-size:clamp(11px,1vw,14px); margin:clamp(40px,5vw,72px) 0 clamp(10px,1.2vw,18px); } .hero .lead{ font-weight:700; font-size:clamp(18px,2vw,28px); line-height:1.24; margin:0 auto; max-width:1000px; } /* fica entre o texto de remate e as duas caixas, já fora do hero */ .turn{ color:var(--white); font-weight:700; font-size:clamp(16px,1.75vw,25px); text-align:center; margin:clamp(38px,5vw,76px) 0 0; } /* ---------- carrossel ---------- */ .gallery{padding-block:clamp(14px,1.7vw,24px) clamp(30px,4vw,54px)} .carousel{position:relative;max-width:var(--maxw);margin-inline:auto} .carousel:focus-visible{outline:3px solid var(--black);outline-offset:6px} .stage{position:relative;width:100%;aspect-ratio:1280/531;overflow:hidden} .track{ position:absolute; top:11.67%; /* 62 / 531 */ left:0; width:100%; /* fixa a base das percentagens dos cartões */ height:var(--slide-h); display:flex; gap:var(--slide-gap); will-change:transform; cursor:grab; touch-action:pan-y; transition:transform .55s cubic-bezier(.4,.02,.2,1); } .is-dragging .track{cursor:grabbing;transition:none} /* usado no salto silencioso entre cópias: nada se anima nesse instante */ .sem-transicao .track,.sem-transicao .slide{transition:none} .slide{ flex:0 0 var(--slide-w); height:100%; overflow:hidden; background:#140406; transform-origin:center center; transition:transform .55s cubic-bezier(.4,.02,.2,1); user-select:none; } .slide picture{display:block;width:100%;height:100%} .slide img{ width:100%;height:100%;object-fit:cover; pointer-events:none; /* o arrasto é do carrossel, não da imagem */ -webkit-user-drag:none;user-select:none; } .slide.is-active{ transform:scale(var(--slide-scale-x),var(--slide-scale-y)); z-index:2; } .carousel-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(16px,1.9vw,26px)} .nav-btn{ width:clamp(36px,3vw,42px);height:clamp(36px,3vw,42px); border:0;border-radius:50%;background:var(--black);color:var(--white); display:grid;place-items:center;cursor:pointer;transition:opacity .2s,transform .2s; } .nav-btn:hover{opacity:.72} .nav-btn:active{transform:scale(.94)} .nav-btn:focus-visible{outline:2px solid var(--black);outline-offset:3px} .nav-btn svg{width:42%;height:auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .aftertext{ color:var(--white); font-weight:700; text-align:center; font-size:clamp(15px,1.45vw,20px); line-height:1.45; max-width:940px; margin:clamp(34px,4.5vw,62px) auto 0; } /* ---------- comparação ---------- */ /* topo curto: quem separa da frase acima é o próprio espaço dela, não é preciso somar o respiro inteiro da secção */ .compare{padding-block:clamp(16px,2vw,28px) clamp(48px,7vw,96px);overflow-x:clip} .compare .grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:var(--maxw);margin-inline:auto} .panel{ border-radius:8px; padding:clamp(28px,3.5vw,48px) clamp(20px,3vw,44px); text-align:center; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:clamp(16px,2.3vw,33px); min-height:clamp(220px,23vw,328px); } .panel .sym{height:clamp(18px,1.6vw,23px);width:auto} /* medidas tiradas da maquete: 1.ª linha do painel preto = 441px de largura, 3 linhas = ~109px de altura, bloco com o símbolo = ~166px */ .panel p{font-weight:700;font-size:clamp(16px,2.22vw,32px);line-height:1.13;max-width:34ch} .panel.light{background:var(--white);color:var(--black)} .panel.dark{background:var(--black);color:var(--white)} /* ---------- estatísticas ---------- */ .stats{padding-bottom:clamp(60px,8vw,120px)} .stats-intro{ color:var(--white); font-weight:700; font-size:clamp(18px,1.95vw,28px); line-height:1.22; max-width:760px; margin:0 0 clamp(20px,2.6vw,38px); } .stats-intro .accent{color:var(--black)} .stat-block + .stat-block{margin-top:clamp(50px,6.5vw,96px)} .bar{display:flex;width:100%;height:clamp(70px,9.4vw,136px);overflow:hidden;position:relative} /* align-self em vez de height:100%: assim os segmentos preenchem a barra mesmo quando ela tem altura automática (é o caso em mobile) */ .bar .seg{align-self:stretch} .bar .seg.black{background:var(--black)} .bar .seg.white{background:var(--white)} .bar .note{ position:absolute;right:clamp(12px,1.6vw,24px);bottom:clamp(10px,1.4vw,20px); text-align:right;color:var(--red);font-weight:700; font-size:clamp(9px,.95vw,15px);line-height:1.6;max-width:min(60%,440px); } .figures{display:flex;justify-content:space-between;gap:24px;margin-top:clamp(14px,1.6vw,22px)} .fig{max-width:48%} .fig .num{display:block;font-weight:700;font-size:clamp(40px,5.4vw,78px);line-height:.95;letter-spacing:-.01em;font-variant-numeric:tabular-nums} .fig p{font-weight:700;font-size:clamp(15px,1.6vw,23px);line-height:1.22;margin-top:.18em} .fig.on-black{color:var(--black)} .fig.on-white{color:var(--white);text-align:right;margin-left:auto} /* ---------- faixas escuras ---------- */ .bands{background:var(--red-dark)} .band{position:relative;display:flex;align-items:center;min-height:clamp(190px,20.5vw,296px);padding-block:clamp(30px,3vw,40px)} .band + .band{border-top:1px solid var(--red)} /* filete que separa as duas faixas */ .band .stripe{position:absolute;top:0;bottom:0;background:var(--red-stripe)} /* A listra tem de seguir a mesma caixa centrada que posiciona o texto. Em percentagem do ecrã inteiro, acima de 1440px afastava-se dele. */ .band{ --caixa:min(100%,calc(var(--maxw) + var(--gutter)*2)); --margem:calc((100% - var(--caixa))/2); } .band-1 .stripe{left:calc(var(--margem) + var(--caixa)*.2375);width:calc(var(--caixa)*.03)} .band-2 .stripe{left:calc(var(--margem) + var(--caixa)*.426);width:calc(var(--caixa)*.042)} .band .inner{position:relative;display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);color:var(--white);width:100%} /* mesma caixa da listra: percentagens simples resolveriam contra o ecrã inteiro */ .band-1 .inner{padding-left:calc(var(--caixa)*.30)} .band-2 .inner{padding-left:calc(var(--caixa)*.50)} .band .big{flex:none;font-weight:700;font-size:clamp(54px,8.6vw,124px);line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .band p{font-weight:700;font-size:clamp(15px,1.6vw,23px);line-height:1.28;max-width:31ch} /* nas faixas o destaque usa o vermelho escuro do próprio fundo */ .band .hl-white{color:var(--red-dark)} /* ---------- formulário ---------- */ .survey{background:var(--grey);padding-block:clamp(60px,8.5vw,130px)} .survey h2{ color:var(--red);text-align:center;font-weight:700; font-size:clamp(34px,5.4vw,78px);line-height:1.05; margin:0 0 clamp(36px,5vw,70px); } .form-card{border:1px solid var(--red);max-width:786px;margin-inline:auto;padding:clamp(30px,4.5vw,64px) clamp(20px,3.5vw,50px)} fieldset{border:0;margin:0;padding:0;text-align:center} fieldset + fieldset{margin-top:clamp(32px,4.2vw,58px)} legend{color:var(--red);font-weight:700;font-size:clamp(17px,1.7vw,24px);line-height:1.22;padding:0;margin-inline:auto;text-align:center} .options{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(16px,2.6vw,40px);margin-top:clamp(14px,1.7vw,24px)} .opt{display:inline-flex;align-items:center;gap:9px;color:var(--red);font-weight:700;font-size:clamp(15px,1.3vw,19px);cursor:pointer} .opt input{ appearance:none;-webkit-appearance:none; width:19px;height:19px;margin:0;border-radius:50%; border:1.6px solid var(--red);background:transparent;cursor:pointer;transition:background .15s; } .opt input:checked{background:var(--red);border-color:var(--red)} .opt input:focus-visible{outline:2px solid var(--red);outline-offset:3px} .field-error{ margin-top:clamp(10px,1.1vw,14px); color:var(--red-dark); font-weight:700; font-size:clamp(13px,1.1vw,15px); } .field-error[hidden]{display:none} .field.is-invalid .opt input{border-color:var(--red-dark);border-width:2px} .submit{ display:block;width:min(365px,100%);margin:clamp(36px,4.6vw,64px) auto 0; background:var(--red);color:var(--white);border:0;border-radius:4px; font-family:inherit;font-weight:700;font-size:clamp(17px,1.55vw,22px); padding:clamp(14px,1.6vw,22px) 20px;cursor:pointer;transition:background .2s; } .submit:hover{background:#c9151c} .submit:disabled{opacity:.55;cursor:not-allowed} /* :empty faz o aviso não ocupar espaço enquanto não há mensagem, para a margem por baixo do botão ficar igual à do topo do cartão */ .form-status{margin-top:18px;text-align:center;color:var(--red);font-weight:700;font-size:15px} .form-status:empty{display:none} /* ---------- contactos ---------- */ .help{padding-block:clamp(60px,8.5vw,120px)} .help .grid{ display:grid; grid-template-columns:minmax(0,438fr) minmax(0,519fr); gap:clamp(32px,7.3vw,105px); align-items:start; max-width:calc(1063px + var(--gutter)*2); } .help h2{font-weight:700;font-size:clamp(36px,4.75vw,68px);line-height:1.02} .help h3{font-weight:700;font-size:clamp(30px,3.6vw,48px);line-height:1.05;margin-bottom:clamp(18px,2vw,28px)} .contact{border-bottom:1.5px solid var(--black);padding-block:clamp(14px,1.6vw,22px)} .contact:first-of-type{padding-top:0} .contact dt{font-weight:700;font-size:clamp(16px,1.4vw,20px);line-height:1.25;margin-bottom:.35em} .contact dd{color:var(--white);font-weight:700;font-size:clamp(12px,1.05vw,15px);line-height:1.6} .contact dd a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)} .contact dd a:hover{border-bottom-color:var(--white)} /* ---------- rodapé ---------- */ .site-footer{background:var(--black);color:var(--white);padding-block:clamp(38px,4.5vw,58px)} /* em ecrã largo mantém-se a maquete: frase e créditos empilhados à esquerda, marca ao centro e parceiros à direita */ .site-footer .grid{ display:grid; grid-template-columns:auto auto auto; grid-template-areas: "frase logo parceiros" "creditos logo parceiros"; align-items:center; justify-content:space-between; column-gap:clamp(24px,4vw,60px); row-gap:clamp(10px,1.2vw,16px); } .claim{grid-area:frase;font-weight:700;text-transform:uppercase;font-size:clamp(18px,1.85vw,26px);line-height:1.24;margin:0} .footer-marca{grid-area:logo} .partners{grid-area:parceiros} .copyright{grid-area:creditos;font-weight:400;font-size:clamp(11px,.95vw,14px);color:rgba(255,255,255,.9)} .footer-logo{width:clamp(104px,9.2vw,133px)} .partners{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px)} .partners .p-eu{width:clamp(112px,10.5vw,150px)} .partners .p-nhc{width:clamp(88px,8.2vw,117px)} .partners .p-cat{width:clamp(42px,3.9vw,56px)} /* ---------- responsivo ---------- */ @media (max-width:900px){ .help .grid{grid-template-columns:1fr} .band-1 .inner{padding-left:22%} .band-2 .inner{padding-left:30%} .band-1 .stripe{left:14%;width:4%} .band-2 .stripe{left:22%;width:5%} .stats-intro{max-width:none} /* empilhado e ao centro: frase, marca, parceiros e créditos por esta ordem */ .site-footer .grid{ grid-template-columns:1fr; grid-template-areas:"frase" "logo" "parceiros" "creditos"; justify-items:center; text-align:center; row-gap:clamp(22px,5vw,34px); } .partners{justify-content:center;flex-wrap:wrap} } @media (max-width:760px){ .hero h1{font-size:clamp(38px,13.3vw,50px)} .compare .grid{grid-template-columns:1fr} /* empilhadas, as caixas convergem uma para a outra: a branca desce, a preta sobe. Só muda o ponto de partida, o repouso continua a ser none. */ .js [data-reveal][data-from="esquerda"]{--partida:translateY(calc(-1 * clamp(40px,12vw,60px)))} .js [data-reveal][data-from="direita"]{--partida:translateY(clamp(40px,12vw,60px))} /* mesma mecânica do desktop, mas um cartão de cada vez: o palco fica quadrado como as fotografias e o cartão ocupa-o por inteiro */ .stage{aspect-ratio:1/1} .track{top:0;height:100%;gap:0} .slide{flex:0 0 100%} .slide.is-active{transform:none} /* já ocupa o palco todo, não há que ampliar */ /* mantém as duas colunas como em desktop: uma encostada a cada extremo */ .figures{gap:16px} .bar{height:auto;min-height:64px} .bar.has-note{min-height:104px} .bar .note{max-width:82%;font-size:15px;line-height:1.4;right:10px;bottom:8px} .band .inner{flex-direction:column;align-items:flex-start;gap:10px} /* afasta o conteúdo das listras claras, que em mobile ficam mais ao centro */ .band-1 .inner,.band-2 .inner{padding-left:38%} .band p{max-width:none} .partners{flex-wrap:wrap} } @media (max-width:620px){ .d-br,br{display:none} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .track,.slide{transition:none} .js [data-reveal]{opacity:1;transform:none;transition:none} }