/* ============================================================
   CicloJob — componentes reutilizáveis
   ============================================================ */

/* ============ CARTÕES ============ */
.cartao{ display:block; position:relative; }
.cartao__media{
  position:relative; overflow:hidden;
  background:var(--betao);
  aspect-ratio:4/5;
}
.cartao--largo .cartao__media{ aspect-ratio:16/10; }
.cartao--alto  .cartao__media{ aspect-ratio:3/4; }
.cartao--paisagem .cartao__media{ aspect-ratio:4/3; }
.cartao__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.05s var(--ease), filter .8s var(--ease);
}
.cartao:hover .cartao__media img{ transform:scale(1.045); }

/* seta ↗ */
.cartao__seta{
  position:absolute; top:1rem; right:1rem;
  width:2.6rem; height:2.6rem; display:grid; place-items:center;
  background:var(--cal); color:var(--tinta);
  font-size:.95rem; line-height:1;
  opacity:0; transform:translate(-.4rem,.4rem) scale(.9);
  transition:opacity .5s var(--ease), transform .55s var(--ease);
}
.cartao:hover .cartao__seta{ opacity:1; transform:none; }

/* selo de estado */
.selo{
  position:absolute; left:1rem; bottom:1rem;
  font-family:var(--mono); font-size:.625rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.42em .7em;
  background:var(--cal); color:var(--tinta);
}
.selo--reservado{ background:var(--latao); color:var(--tinta); }
.selo--vendido{ background:var(--betao); color:var(--cinza-cl); }

.cartao__corpo{ padding-top:1.05rem; }
.cartao__meta{
  display:flex; flex-wrap:wrap; gap:.4rem 1rem;
  margin-bottom:.5rem;
}
.cartao h3{
  font-family:var(--display);
  font-size:clamp(1.25rem,1.9vw,1.7rem);
  line-height:1.12; letter-spacing:-.01em;
  margin:0 0 .35rem;
  transition:transform .6s var(--ease);
}
.cartao:hover h3{ transform:translateX(.28rem); }
.cartao__preco{
  font-family:var(--display); font-size:1.15rem;
  color:var(--latao-txt);
}
.escuro .cartao__preco{ color:var(--latao-cl); }
.cartao__rodape{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; padding-top:.6rem; margin-top:.6rem;
  border-top:1px solid var(--linha);
}
.escuro .cartao__rodape{ border-color:var(--linha-cl); }

/* ============ TRANSIÇÃO PROJETO → ENTREGA ============ */
.transicao{ position:relative; }
.transicao__pista{ height:230vh; }
.transicao__palco{
  position:sticky; top:0;
  height:100svh;
  display:grid; grid-template-rows:1fr auto;
  gap:1rem;
  padding:clamp(4.5rem,9vh,7rem) var(--margem) clamp(1.5rem,4vh,2.5rem);
  --p:0;
}
.transicao__quadro{
  position:relative; margin:0; overflow:hidden;
  background:var(--betao);
}
.transicao__quadro img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.transicao__antes{
  clip-path:inset(0 calc(var(--p) * 100%) 0 0);
  will-change:clip-path;
}
.transicao[data-modo="fade"] .transicao__antes{
  clip-path:none; opacity:calc(1 - var(--p)); will-change:opacity;
}
/* lâmina dourada no bordo do wipe */
.transicao__lamina{
  position:absolute; top:0; bottom:0; width:2px;
  left:calc((1 - var(--p)) * 100%);
  margin-left:-1px;
  background:linear-gradient(180deg,
    rgba(201,162,39,0) 0%, var(--latao) 18%, var(--latao) 82%, rgba(201,162,39,0) 100%);
  opacity:calc(min(var(--p), 1 - var(--p)) * 3.2);
  pointer-events:none;
}
.transicao[data-modo="fade"] .transicao__lamina{ display:none; }

.transicao__legenda{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center; gap:1rem;
}
.transicao__titulo{
  font-family:var(--display); font-size:clamp(1rem,1.5vw,1.35rem);
  text-align:center;
}
.transicao__lado{ transition:opacity .45s var(--ease), color .45s var(--ease); }
.transicao__lado em{ font-style:normal; opacity:.7; }
.transicao__lado--a{ opacity:calc(1 - var(--p) * .78); }
.transicao__lado--b{ text-align:right; opacity:calc(.22 + var(--p) * .78); color:var(--latao-cl); }

/* ---- modo "cortina": duas transições lado a lado ---- */
.transicao__duo{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--gutter);
  padding-inline:var(--margem);
}
.transicao--cortina .transicao__pista{ height:210vh; }
.transicao--cortina .transicao__palco{
  position:sticky; top:clamp(5.5rem,14vh,9rem);
  height:auto; display:block;
  padding:0;
}
.transicao--cortina .transicao__quadro{ position:relative; aspect-ratio:4/3; }
.transicao--cortina .transicao__quadro img{ position:absolute; inset:0; }
/* a "antes" (render) ocupa a faixa de baixo e vai encolhendo com o scroll */
.transicao--cortina .transicao__antes{
  clip-path:inset(calc(var(--p) * 100%) 0 0 0);
  will-change:clip-path;
}
.transicao--cortina .transicao__lamina{
  top:calc(var(--p) * 100%); left:0; right:0;
  width:auto; height:2px; margin:0;
  background:var(--cal); opacity:1;
  box-shadow:0 0 10px rgba(0,0,0,.35);
}
/* legenda única: as duas ocupam o mesmo canto e trocam a meio da cortina */
.transicao--cortina .transicao__lado{
  position:absolute; z-index:2;
  bottom:1.1rem; left:1.2rem; text-align:left;
  color:var(--cal);
  text-shadow:0 1px 12px rgba(0,0,0,.45);
  transition:opacity .3s var(--ease);
}
.transicao--cortina .transicao__lado--a{ opacity:calc((0.5 - var(--p)) * 12); }
.transicao--cortina .transicao__lado--b{ opacity:calc((var(--p) - 0.5) * 12); }
.transicao--cortina .transicao__titulo{
  margin:.9rem 0 0; text-align:left;
  font-family:var(--display); font-size:clamp(1rem,1.4vw,1.3rem);
}
@media (max-width:820px){
  .transicao__duo{ grid-template-columns:1fr; gap:clamp(2rem,6vw,3rem); }
  .transicao--cortina .transicao__pista{ height:160vh; }
}

/* fallback: sem sticky, as duas imagens em sequência */
.transicao--estatica .transicao__pista{ height:auto; }
.transicao--estatica .transicao__palco{ position:static; height:auto; }
.transicao--estatica .transicao__quadro{ position:static; aspect-ratio:16/10; }
.transicao--estatica .transicao__quadro img{ position:static; aspect-ratio:16/10; }
.transicao--estatica .transicao__antes{ clip-path:none; opacity:1; margin-bottom:.6rem; }
.transicao--estatica .transicao__lamina{ display:none; }
.transicao--estatica .transicao__lado{ opacity:1; }

@media (max-width:820px){
  .transicao__pista{ height:180vh; }
  .transicao__legenda{ grid-template-columns:1fr 1fr; }
  .transicao__titulo{ grid-column:1/-1; grid-row:1; text-align:left; }
}

/* ============ GALERIA + LIGHTBOX ============ */
.galeria{ display:grid; gap:var(--gutter); }
.galeria--tres{ grid-template-columns:repeat(3,1fr); }
.galeria__item{ position:relative; overflow:hidden; background:var(--betao); cursor:zoom-in; }
.galeria__item img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  transition:transform .9s var(--ease); }
.galeria__item:hover img{ transform:scale(1.04); }
/* ritmo: cada 5.º item ocupa duas colunas */
.galeria--tres .galeria__item:nth-child(5n+1){ grid-column:span 2; }
.galeria--tres .galeria__item:nth-child(5n+1) img{ aspect-ratio:16/9; }
@media (max-width:760px){
  .galeria--tres{ grid-template-columns:repeat(2,1fr); }
  .galeria--tres .galeria__item:nth-child(5n+1){ grid-column:span 2; }
}

.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(12,11,10,.96);
  display:grid; grid-template-rows:auto 1fr auto;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s;
}
.lightbox[open],.lightbox.aberta{ opacity:1; visibility:visible; }
.lightbox__topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.25rem var(--margem); color:var(--cinza-cl);
}
.lightbox__palco{ position:relative; display:grid; place-items:center; padding:0 var(--margem); min-height:0; }
.lightbox__palco img{ max-width:100%; max-height:100%; object-fit:contain;
  opacity:0; transition:opacity .45s var(--ease); }
.lightbox__palco img.carregada{ opacity:1; }
.lightbox__base{ padding:1rem var(--margem) 1.5rem; color:var(--cinza-cl); text-align:center; }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:3rem; height:3rem; display:grid; place-items:center;
  color:var(--cal); font-size:1.1rem;
  border:1px solid var(--linha-cl);
  transition:background .4s var(--ease), color .4s var(--ease);
}
.lightbox__nav:hover{ background:var(--cal); color:var(--tinta); }
.lightbox__nav--ant{ left:calc(var(--margem) / 3); }
.lightbox__nav--seg{ right:calc(var(--margem) / 3); }
.lightbox__fechar{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--cal); }

/* ============ ACORDEÃO (FAQ) ============ */
.acordeao__item{ border-top:1px solid var(--linha); }
.acordeao__item:last-child{ border-bottom:1px solid var(--linha); }
.acordeao__botao{
  width:100%; display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; text-align:left;
  padding:clamp(1.1rem,2vw,1.6rem) 0;
  font-family:var(--display); font-size:clamp(1.1rem,1.7vw,1.5rem);
  line-height:1.2; letter-spacing:-.008em;
  transition:color .4s var(--ease);
}
.acordeao__botao:hover{ color:var(--latao-txt); }
.acordeao__sinal{ flex:none; position:relative; width:.85rem; height:.85rem; align-self:center; }
.acordeao__sinal::before,.acordeao__sinal::after{
  content:""; position:absolute; inset:50% 0 auto; height:1px; background:currentColor;
  transition:transform .5s var(--ease), opacity .4s var(--ease);
}
.acordeao__sinal::after{ transform:rotate(90deg); }
.acordeao__item[aria-expanded="true"] .acordeao__sinal::after{ transform:rotate(0); opacity:0; }
.acordeao__painel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .6s var(--ease);
}
.acordeao__item[aria-expanded="true"] .acordeao__painel{ grid-template-rows:1fr; }
.acordeao__painel > div{ overflow:hidden; }
.acordeao__painel p{ margin:0 0 clamp(1.1rem,2vw,1.6rem); color:var(--cinza); max-width:58ch; }

/* ============ FORMULÁRIO ============ */
.form{ display:grid; gap:clamp(1.1rem,2vw,1.6rem); }
.form__linha{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.1rem,2vw,1.6rem); }
@media (max-width:660px){ .form__linha{ grid-template-columns:1fr; } }

.campo{ position:relative; display:grid; }
.campo label{
  font-family:var(--mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--cinza); margin-bottom:.55rem;
}
.escuro .campo label{ color:var(--cinza-cl); }
.campo input,.campo textarea,.campo select{
  font:inherit; font-size:.9375rem; color:inherit;
  background:transparent;
  border:0; border-bottom:1px solid var(--linha);
  padding:.65rem 0; border-radius:0;
  transition:border-color .4s var(--ease);
}
.escuro .campo input,.escuro .campo textarea,.escuro .campo select{ border-color:var(--linha-cl); }
.campo textarea{ resize:vertical; min-height:6.5rem; }
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:0; border-color:var(--latao);
}
.campo--erro input,.campo--erro textarea,.campo--erro select{ border-color:#B3402E; }
.campo__erro{
  font-family:var(--mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:#B3402E;
  margin-top:.45rem; min-height:1em;
}
.campo select{ appearance:none; cursor:pointer; }
.campo--select{ position:relative; }
.campo--select::after{
  content:"↓"; position:absolute; right:.1rem; bottom:.7rem;
  pointer-events:none; color:var(--cinza); font-size:.8rem;
}
/* honeypot */
.form__mel{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__estado{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  padding:.9rem 1.1rem; border-left:2px solid var(--latao);
  background:rgba(201,162,39,.08);
}
.form__estado--erro{ border-color:#B3402E; background:rgba(179,64,46,.08); }
.form__estado[hidden]{ display:none !important; }
.form__nota{ font-size:.8125rem; color:var(--cinza); max-width:46ch; }
.escuro .form__nota{ color:var(--cinza-cl); }

/* ============ FILTROS ============ */
.filtros{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:clamp(1rem,2.5vw,2.5rem);
  padding-bottom:1.5rem; border-bottom:1px solid var(--linha);
}
.filtros .campo{ min-width:9rem; }
.filtros__contagem{ margin-left:auto; }
.filtros__limpar{
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--latao-txt);
  border-bottom:1px solid currentColor; padding-bottom:.15rem;
}

/* ============ ESTADOS ============ */
.aviso-erro,.aviso-vazio{
  font-family:var(--mono); font-size:.8125rem; color:var(--cinza);
  padding:3rem 0; grid-column:1/-1;
}
.aviso-erro span{ display:block; margin-top:.5rem; opacity:.7; font-size:.75rem; }
.esqueleto{ background:var(--linha); animation:pulsar 1.6s var(--ease-io) infinite; }
@keyframes pulsar{ 50%{ opacity:.45 } }

/* ---------------- avisos de configuração ---------------- */
.aviso-servidor{
  position:relative; z-index:400;
  background:var(--tinta); color:var(--cal);
  padding:1.1rem var(--margem);
  border-bottom:2px solid var(--latao);
  font-size:.875rem; line-height:1.6;
}
.aviso-servidor p{ margin:0; max-width:78ch; }
.aviso-servidor p + p{ margin-top:.5rem; color:var(--cinza-cl); }
.aviso-servidor strong{ font-weight:500; color:var(--latao-cl); }
.aviso-servidor code{
  font-family:var(--mono); font-size:.8125em;
  background:rgba(244,241,236,.1); padding:.15em .45em;
}

.aviso-erro{
  grid-column:1/-1; display:grid; gap:.5rem; justify-items:start;
  padding:2.5rem 0; max-width:60ch;
  border-top:1px solid var(--latao);
}
.aviso-erro strong{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.15rem,1.8vw,1.5rem); line-height:1.2;
}
.aviso-erro span{ font-size:.875rem; color:var(--cinza); }
.escuro .aviso-erro span{ color:var(--cinza-cl); }
.aviso-erro code{
  font-family:var(--mono); font-size:.8125rem;
  background:rgba(201,162,39,.14); color:var(--latao-txt); padding:.15em .45em;
}
.escuro .aviso-erro code{ color:var(--latao-cl); }
.aviso-erro__cmd{
  display:block; padding:.75em 1em !important;
  border-left:2px solid var(--latao); user-select:all;
}