/* ============================================================
   CicloJob — site: navegação, rodapé, botões, reveals
   ============================================================ */

/* ---------------- navbar ---------------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gutter);
  padding:2.2rem var(--margem);
  transition:background .5s var(--ease), padding .5s var(--ease),
             box-shadow .5s var(--ease);
}
.nav::after{
  content:""; position:absolute; inset:auto 0 0; height:1px;
  background:var(--linha); opacity:0;
  transition:opacity .5s var(--ease);
}
.nav--fixa{
  background:var(--cal);
  padding-block:1.5rem;
}
.nav--fixa::after{ opacity:1; }
.nav--oculta{ transform:translateY(-100%); }

.nav__logo{ display:block; flex:none; }
.nav__logo img{ height:clamp(26px, 2.4vw, 34px); width:auto; transition:height .5s var(--ease); }
.nav--fixa .nav__logo img{ height:clamp(24px, 2.1vw, 30px); }
.nav__logo .l-claro{ display:block; }
.nav__logo .l-escuro{ display:none; }
.nav--fixa .nav__logo .l-claro{ display:none; }
.nav--fixa .nav__logo .l-escuro{ display:block; }

.nav__menu{
  display:flex; align-items:center; gap:clamp(1.25rem, 2.4vw, 2.6rem);
  list-style:none; margin:0; padding:0;
}
.nav__link{
  font-family:var(--mono);
  font-size:.8125rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--cal);
  position:relative; padding-block:.35rem;
  transition:color .4s var(--ease);
}
.nav--fixa .nav__link{ color:var(--tinta); }
.nav__link::after{
  content:""; position:absolute; inset:auto 0 0; height:1px;
  background:var(--latao-cl);
  transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease);
}
.nav--fixa .nav__link::after{ background:var(--latao); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }

/* botão de menu (mobile) */
.nav__burger{ display:none; width:34px; height:20px; position:relative; flex:none; }
.nav__burger span{
  position:absolute; left:0; right:0; height:1.5px; background:var(--cal);
  transition:transform .5s var(--ease), opacity .3s var(--ease), background .4s var(--ease);
}
.nav__burger span:nth-child(1){ top:2px; }
.nav__burger span:nth-child(2){ top:50%; margin-top:-.75px; }
.nav__burger span:nth-child(3){ bottom:2px; }
.nav--fixa .nav__burger span{ background:var(--tinta); }
.nav.nav--aberta .nav__burger span{ background:var(--cal); }
/* aberto: o traço do meio desaparece e os outros dois fazem o X */
.nav--aberta .nav__burger span:nth-child(1){ transform:translateY(7.25px) rotate(38deg); }
.nav--aberta .nav__burger span:nth-child(2){ opacity:0; transform:scaleX(.4); }
.nav--aberta .nav__burger span:nth-child(3){ transform:translateY(-7.25px) rotate(-38deg); }

@media (max-width:860px){
  .nav__burger{ display:block; }
  .nav__menu{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:.35rem;
    padding:0 var(--margem);
    background:var(--tinta);
    clip-path:inset(0 0 100% 0);
    transition:clip-path .8s var(--ease);
  }
  .nav.nav--aberta .nav__menu{ clip-path:inset(0 0 0 0); }
  /* .nav qualificado de propósito: tem de vencer .nav--fixa por
     especificidade, e não só por !important                      */
  .nav.nav--aberta{ background:transparent !important; }
  .nav.nav--aberta::after{ opacity:0; }
  .nav.nav--aberta .nav__logo .l-claro{ display:block; }
  .nav.nav--aberta .nav__logo .l-escuro{ display:none; }
  .nav__menu .nav__link{
    font-family:var(--display); font-size:clamp(2rem,9vw,3rem);
    letter-spacing:-.015em; text-transform:none; color:var(--cal);
    opacity:0; transform:translateY(1.1rem);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
  }
  .nav.nav--aberta .nav__menu .nav__link{ opacity:1; transform:none; transition-delay:calc(.14s + var(--i,0)*.055s); }
  .nav__menu .nav__link::after{ display:none; }
}

/* ---------------- botões ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:.85em;
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  padding:1.05em 1.6em;
  border:1px solid currentColor;
  position:relative; overflow:hidden;
  transition:color .5s var(--ease);
}
.btn span{ position:relative; z-index:1; }
.btn::before{
  content:""; position:absolute; inset:0; background:var(--tinta);
  transform:translateY(101%);
  transition:transform .6s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:var(--cal); }
.btn--claro{ color:var(--cal); border-color:rgba(244,241,236,.4); }
.btn--claro::before{ background:var(--cal); }
.btn--claro:hover{ color:var(--tinta); }
.btn .seta{ transition:transform .5s var(--ease); position:relative; z-index:1; }
.btn:hover .seta{ transform:translate(.28em,-.28em); }

/* ---------------- reveals ---------------- */
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{ --d:0ms; }

  [data-reveal="fade"]{ opacity:0; transition:opacity var(--lento) var(--ease) var(--d); }
  [data-reveal="rise"]{ opacity:0; transform:translateY(2.2rem);
    transition:opacity var(--lento) var(--ease) var(--d), transform var(--lento) var(--ease) var(--d); }
  [data-reveal="mask"]{ clip-path:inset(0 0 100% 0);
    transition:clip-path 1.35s var(--ease) var(--d); }
  [data-reveal="linha"]{ transform:scaleX(0); transform-origin:left;
    transition:transform 1.1s var(--ease-io) var(--d); }
  [data-reveal="linha-v"]{ transform:scaleY(0); transform-origin:top;
    transition:transform 1.1s var(--ease-io) var(--d); }

  .visivel[data-reveal]{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }
}

/* ---------------- salto de acessibilidade ---------------- */
.salto{
  position:absolute; left:var(--margem); top:0; z-index:300;
  transform:translateY(-140%);
  background:var(--tinta); color:var(--cal);
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.9rem 1.2rem;
  transition:transform .35s var(--ease);
}
.salto:focus{ transform:translateY(0); }

:focus-visible{ outline:2px solid var(--latao); outline-offset:3px; }

/* ---------------- ligação de texto ---------------- */
.ligacao{
  display:inline-flex; align-items:baseline; gap:.45em;
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  padding-bottom:.3rem; position:relative;
}
.ligacao::after{
  content:""; position:absolute; inset:auto 0 0; height:1px;
  background:currentColor; opacity:.35;
  transition:opacity .4s var(--ease), transform .55s var(--ease);
}
.ligacao:hover::after{ opacity:1; }
.ligacao span{ transition:transform .5s var(--ease); }
.ligacao:hover span{ transform:translate(.25em,-.25em); }
.opcional{ text-transform:none; letter-spacing:0; opacity:.6; }

/* ---------------- cabeçalho de página interior ---------------- */
.cabecalho{
  padding:calc(var(--sec-y) * .62 + 4rem) var(--margem) clamp(2.5rem,6vw,5rem);
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter);
  align-items:end;
}
.cabecalho .num{ grid-column:1/4; margin-bottom:.75rem; }
.cabecalho h1{ grid-column:1/8; }
.cabecalho__intro{ grid-column:9/13; margin:0; color:var(--cinza); }
.escuro .cabecalho__intro{ color:var(--cinza-cl); }
@media (max-width:900px){
  .cabecalho .num,.cabecalho h1,.cabecalho__intro{ grid-column:1/-1; }
  .cabecalho__intro{ margin-top:1.5rem; }
}

/* ---------------- migalhas ---------------- */
.migalhas{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline; }
.migalhas a{ opacity:.65; transition:opacity .4s var(--ease); }
.migalhas a:hover{ opacity:1; }

/* ---------------- rodapé ---------------- */
.rodape{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--tinta); color:var(--cal);
}

/* fotografia de fundo, muito esbatida — dá profundidade sem competir */
.rodape__fundo{ position:absolute; inset:0; z-index:-1; }
.rodape__fundo img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  opacity:.22; filter:grayscale(.4) contrast(1.05);
}
.rodape__fundo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(25,23,20,.86) 0%, rgba(25,23,20,.60) 40%, rgba(25,23,20,.90) 78%, rgba(25,23,20,.97) 100%),
    radial-gradient(130% 95% at 42% 38%, rgba(25,23,20,.10) 0%, rgba(25,23,20,.88) 100%);
}

.rodape__interior{ padding-block:clamp(3.5rem,8vw,6.5rem) clamp(1.75rem,3vw,2.5rem); }

.rodape__topo{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2.5rem,5vw,4rem);
  align-items:start;
  padding-bottom:clamp(3rem,7vw,6rem);
}

.rodape__logo{ width:clamp(170px,17vw,220px); height:auto; margin-bottom:clamp(1.5rem,3vw,2rem); }
.rodape__tagline{
  margin:0 0 clamp(1.75rem,3.5vw,2.5rem);
  max-width:38ch; color:var(--cinza-cl);
  font-size:clamp(.9375rem,.9rem + .2vw,1.0625rem); line-height:1.65;
}

/* redes sociais — círculos finos */
.rodape__redes{ list-style:none; margin:0; padding:0; display:flex; gap:.85rem; }
.rodape__redes a{
  display:grid; place-items:center;
  width:2.9rem; height:2.9rem; border-radius:50%;
  border:1px solid rgba(244,241,236,.28); color:var(--cal);
  transition:background .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease), transform .45s var(--ease);
}
.rodape__redes a:hover{
  background:var(--cal); color:var(--tinta);
  border-color:var(--cal); transform:translateY(-2px);
}
.rodape__redes svg{ width:1.05rem; height:1.05rem; }

/* coluna de contacto, alinhada à direita */
.rodape__contacto{ text-align:right; }
.rodape__titulo{
  color:var(--cal); letter-spacing:.22em;
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
}
.rodape__contacto ul{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; }
.rodape__contacto li{
  font-size:clamp(1rem,.95rem + .35vw,1.2rem); line-height:1.5;
  color:var(--cinza-cl);
}
.rodape__contacto a{
  position:relative; color:var(--cinza-cl);
  transition:color .4s var(--ease);
}
.rodape__contacto a::after{
  content:""; position:absolute; inset:auto 0 -3px; height:1px;
  background:var(--latao-cl);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.rodape__contacto a:hover{ color:var(--cal); }
.rodape__contacto a:hover::after{ transform:scaleX(1); transform-origin:left; }

.rodape__filete{ height:1px; border:0; margin:0; background:rgba(244,241,236,.16); }

.rodape__base{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.5rem 2.5rem;
  padding-top:clamp(1.5rem,3vw,2.25rem);
  /* espaço à direita para o botão flutuante de voltar ao topo */
  padding-right:4.75rem;
}
.rodape__nav{ display:flex; flex-wrap:wrap; gap:clamp(1.25rem,2.5vw,2.25rem); }
.rodape__nav a{
  font-size:1rem; color:var(--cal);
  position:relative; padding-bottom:.2rem;
}
.rodape__nav a::after{
  content:""; position:absolute; inset:auto 0 0; height:1px;
  background:var(--latao-cl);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.rodape__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.rodape__creditos{ text-align:right; display:grid; gap:.35rem; }
.rodape__creditos p{ margin:0; font-size:.8125rem; color:var(--cinza-cl); }
.rodape__creditos a{ color:var(--cinza-cl); border-bottom:1px solid rgba(244,241,236,.3);
  padding-bottom:.05rem; transition:color .4s var(--ease), border-color .4s var(--ease); }
.rodape__creditos a:hover{ color:var(--cal); border-color:var(--cal); }
.rodape__autor{ color:var(--latao-cl) !important; border-color:rgba(212,180,74,.45) !important; }
.rodape__autor:hover{ border-color:var(--latao-cl) !important; }

@media (max-width:860px){
  .rodape__topo{ grid-template-columns:1fr; }
  .rodape__contacto{ text-align:left; }
  .rodape__contacto a::after{ transform-origin:left; }
  .rodape__base{ flex-direction:column; align-items:flex-start;
    padding-bottom:3.25rem; }
  .rodape__creditos{ text-align:left; }
}

/* ---------------- voltar ao topo ---------------- */
.subir{
  position:fixed; z-index:90;
  right:clamp(1rem,3vw,2.5rem); bottom:clamp(1rem,3vw,2.5rem);
  width:3.4rem; height:3.4rem; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(25,23,20,.55);
  border:1px solid rgba(244,241,236,.32);
  color:var(--cal); font-size:1.05rem;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transform:translateY(.75rem);
  transition:opacity .5s var(--ease), transform .5s var(--ease),
             background .4s var(--ease), color .4s var(--ease);
}
.subir[hidden]{ display:grid !important; pointer-events:none; }
.subir--visivel{ opacity:1; transform:none; pointer-events:auto; }
.subir:hover{ background:var(--cal); color:var(--tinta); border-color:var(--cal); }
.subir span{ transition:transform .45s var(--ease); }
.subir:hover span{ transform:translateY(-2px); }