/* ============================================================
   CicloJob — home
   ============================================================ */

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  overflow:hidden;
  background:var(--tinta);
  color:var(--cal);
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  transform:scale(1.09);
  animation:deriva 26s var(--ease-io) forwards;
}
@keyframes deriva{ to{ transform:scale(1); } }
@media (prefers-reduced-motion:reduce){ .hero__media img{ animation:none; transform:none; } }

.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(25,23,20,.60) 0%, rgba(25,23,20,.10) 28%, rgba(25,23,20,.34) 56%,
                            rgba(25,23,20,.74) 80%, rgba(25,23,20,.93) 100%),
    linear-gradient(94deg, rgba(25,23,20,.56) 0%, rgba(25,23,20,0) 62%);
}

.hero__corpo{
  position:relative; z-index:2;
  align-self:end;
  padding:0 var(--margem) clamp(2.5rem,6vh,4rem);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(1.5rem,4vw,4rem);
}
@media (max-width:960px){ .hero__corpo{ grid-template-columns:1fr; } }

.hero h1{ margin:0 0 clamp(1.25rem,2.4vw,2rem); max-width:15ch; }
.hero h1 em{ color:var(--latao-cl); }
.hero__sub{ max-width:44ch; color:var(--cal); opacity:.86; margin:0 0 clamp(1.75rem,3vw,2.5rem); }
.hero__acoes{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ficha lateral do hero */
.hero__ficha{
  border-top:1px solid var(--linha-cl);
  padding-top:1rem;
  min-width:min(100%, 15rem);
  display:grid; gap:.35rem;
}
.hero__ficha dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.15rem 1.25rem; }
.hero__ficha dt{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cinza-cl); }
.hero__ficha dd{ margin:0; font-size:.8125rem; text-align:right; color:var(--cal); }

/* indicador de scroll */
.hero__scroll{
  position:absolute; z-index:2; right:var(--margem); top:calc(50% + 2rem);
  display:grid; justify-items:center; gap:.75rem;
  writing-mode:vertical-rl;
  font-family:var(--mono); font-size:.625rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cinza-cl);
}
.hero__scroll i{ display:block; width:1px; height:clamp(3rem,7vh,4.5rem); background:var(--linha-cl); position:relative; overflow:hidden; }
.hero__scroll i::after{
  content:""; position:absolute; inset:0; background:var(--latao-cl);
  animation:desce 2.6s var(--ease-io) infinite;
}
@keyframes desce{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }
@media (max-width:1100px){ .hero__scroll{ display:none; } }

/* ============ 01 — MANIFESTO ============ */
.manifesto{ padding-block:clamp(6rem,14vw,13rem); }
.manifesto__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);
}
.manifesto__marca{ grid-column:1/3; display:grid; gap:1.15rem; align-content:start; }
.manifesto__marca i{ display:block; width:1px; height:clamp(4rem,9vw,7rem); background:var(--latao); }
.manifesto__texto{ grid-column:5/12; }
.manifesto__lead{
  font-family:var(--display);
  font-size:clamp(1.5rem,2.9vw,2.7rem);
  line-height:1.16; letter-spacing:-.014em;
  margin:0 0 clamp(2rem,4vw,3.25rem);
  /* sem limite de medida: acompanha a largura das duas colunas abaixo */
}
.manifesto__lead em{ font-style:italic; color:var(--latao-txt); }
.manifesto__cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.5rem,3vw,3.5rem); }
.manifesto__cols p{ color:var(--cinza); }

@media (max-width:900px){
  .manifesto__marca{ grid-column:1/-1; }
  .manifesto__marca i{ height:3rem; }
  .manifesto__texto{ grid-column:1/-1; margin-top:2rem; }
  .manifesto__cols{ grid-template-columns:1fr; }
}

/* ============ 02 — O QUE FAZEMOS ============ */
.fazemos{
  --recuo:clamp(4.5rem,9vw,7.5rem);   /* quanto os cartões sobem sobre a faixa */
  padding-bottom:clamp(6rem,14vw,13rem);
}

/* faixa escura com render de fundo */
.fazemos__faixa{
  position:relative; isolation:isolate;
  background:var(--tinta); color:var(--cal);
  padding-block:clamp(5rem,11vw,9rem) calc(var(--recuo) + clamp(3rem,6vw,5rem));
  overflow:hidden;
}
.fazemos__fundo{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; object-fit:cover;
  opacity:.34; filter:grayscale(.35);
}
.fazemos__topo{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter);
  align-items:end;
}
.fazemos__topo .num{ grid-column:1/4; color:var(--latao-cl); }
.fazemos__topo h2{ grid-column:5/13; }

/* cartões brancos sobrepostos ao limite da faixa */
.fazemos__lista{
  position:relative; z-index:1;
  margin-top:calc(var(--recuo) * -1);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,2.5vw,2.5rem);
}
.servico{
  position:relative; display:block;
  background:var(--cal); color:var(--tinta);
  padding:clamp(1.75rem,3vw,2.75rem);
  box-shadow:0 24px 60px rgba(25,23,20,.14);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.servico:hover{ transform:translateY(-6px); box-shadow:0 32px 74px rgba(25,23,20,.2); }
.servico__icone{
  display:block; width:2.6rem; height:2.6rem;
  color:var(--latao);
}
.servico__titulo{
  font-family:var(--display);
  font-size:clamp(1.25rem,1.9vw,1.6rem);
  margin:clamp(1.75rem,3.5vw,2.75rem) 0 .85rem;
}
.servico p{ color:var(--cinza); margin:0; font-size:.9375rem; }
/* seta circular no canto superior direito */
.servico__seta{
  position:absolute; top:clamp(1.5rem,2.6vw,2.4rem); right:clamp(1.5rem,2.6vw,2.4rem);
  width:2.9rem; height:2.9rem; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(25,23,20,.06); color:var(--tinta);
  font-size:.95rem; line-height:1;
  transition:background .45s var(--ease), transform .45s var(--ease);
}
.servico:hover .servico__seta{ background:var(--latao); transform:translate(2px,-2px); }

@media (max-width:820px){
  .fazemos{ --recuo:clamp(2.5rem,7vw,4rem); }
  .fazemos__lista{ grid-template-columns:1fr; gap:1.5rem; }
  .fazemos__topo h2,.fazemos__topo .num{ grid-column:1/-1; }
  .fazemos__topo .num{ margin-bottom:1rem; }
}

/* ============ 03 — OBRAS ============ */
.obras{ padding-block:clamp(5rem,11vw,9rem); background:var(--noite); }
.obras__topo{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter);
  align-items:end; margin-bottom:clamp(2.5rem,6vw,5rem);
}
/* cabeçalho à direita — inverte o alinhamento da secção anterior */
.obras__topo h2{ grid-column:1/6; }
.obras__intro{ grid-column:8/13; display:grid; gap:1.1rem; justify-items:start; }
.obras__intro p{ margin:0; max-width:38ch; }

/* carrossel horizontal — todos os cartões do mesmo tamanho */
.obras__rail-zona{ position:relative; }
.obras__rail{
  display:flex; gap:var(--gutter);
  padding-inline:var(--margem);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--margem);
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  cursor:grab;
}
.obras__rail::-webkit-scrollbar{ display:none; }
.obras__rail.is-agarrado{ cursor:grabbing; scroll-snap-type:none; }
.obras__rail.is-agarrado a{ pointer-events:none; }
.obras__celula{
  flex:0 0 clamp(19rem, 42vw, 40rem);
  scroll-snap-align:start;
}
/* barra de progresso do scroll */
.obras__barra{
  margin-top:clamp(1.5rem,3vw,2.5rem);
  height:1px; background:rgba(255,255,255,.16);
}
.obras__barra span{
  display:block; height:100%; background:var(--latao);
  transform:scaleX(0); transform-origin:left;
  transition:transform .18s linear;
}

@media (max-width:900px){
  .obras__topo h2,.obras__intro{ grid-column:1/-1; }
  .obras__intro{ margin-top:1.75rem; }
  .obras__celula{ flex-basis:min(82vw, 30rem); }
}

/* ============ 04 — DO PROJETO À ENTREGA ============ */
.entrega{ padding-top:clamp(4rem,9vw,8rem); }
.entrega__topo .num{ color:var(--latao); }
.entrega__topo{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter);
  align-items:end; padding-bottom:clamp(2.5rem,6vw,4.5rem);
}
.entrega__topo .num{ grid-column:1/4; }
.entrega__topo h2{ grid-column:1/8; }
.entrega__topo h2 em{ color:var(--latao); }
.entrega__topo .lead{ grid-column:9/13; margin:0; color:var(--cinza); }
@media (max-width:900px){
  .entrega__topo .num,.entrega__topo h2,.entrega__topo .lead{ grid-column:1/-1; }
  .entrega__topo .lead{ margin-top:1.5rem; }
}

/* ============ 05 — IMÓVEIS À VENDA ============ */
.venda{ padding-block:clamp(5rem,12vw,10rem); }
.venda__topo{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter);
  align-items:end; margin-bottom:clamp(2.5rem,6vw,4.5rem);
}
.venda__topo .num{ grid-column:1/4; }
.venda__topo h2{ grid-column:1/7; }
.venda__topo .ligacao{ grid-column:11/13; justify-self:end; }
.venda__grelha{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,2.5vw,2.5rem); }
/* escalonamento subtil */
.venda__grelha{ align-items:start; }
.venda__celula{ display:flex; }
.venda__celula > .cartao{ display:flex; flex-direction:column; width:100%; }
.venda__celula .cartao__corpo{ flex:1; }
@media (max-width:900px){
  .venda__topo .num,.venda__topo h2{ grid-column:1/-1; }
  .venda__topo .ligacao{ grid-column:1/-1; justify-self:start; margin-top:1rem; }
  .venda__grelha{ grid-template-columns:1fr; gap:2.5rem; }
}

/* ============ 06 — NÚMEROS ============ */
.numeros{ padding-block:clamp(4.5rem,10vw,8rem); background:var(--noite); }
.numeros__lista{
  list-style:none; margin:clamp(2rem,5vw,3.5rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.75rem,3vw,2.5rem);
}
.numeros__item{ display:grid; gap:.6rem; padding-top:1.1rem; border-top:1px solid var(--linha-cl); }
.numeros__valor{ color:var(--latao-cl); line-height:1; }
.numeros__valor mark.falta{ font-size:.34em; }
@media (max-width:800px){ .numeros__lista{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .numeros__lista{ grid-template-columns:1fr; } }

/* ============ 07 — FAQ ============ */
.faq{
  padding-block:clamp(5rem,12vw,10rem);
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter);
}
.faq__marca{ grid-column:1/3; display:grid; gap:1.15rem; align-content:start; }
.faq__marca i{ display:block; width:1px; height:clamp(3rem,7vw,5rem); background:var(--latao); }
/* coluna estreita e deslocada para a direita */
.faq__corpo{ grid-column:6/13; }
.faq__corpo h2{ margin-bottom:clamp(2rem,4vw,3rem); }
@media (max-width:900px){
  .faq{ grid-template-columns:1fr; }
  .faq__marca{ grid-column:1/-1; }
  .faq__corpo{ grid-column:1/-1; }
}

/* ============ 08 — CTA ============ */
.cta{
  padding-block:clamp(5rem,12vw,10rem);
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(2.5rem,5vw,4rem) var(--gutter);
}
.cta__texto{ grid-column:1/6; display:grid; gap:1.25rem; align-content:start; }
.cta__texto .lead{ margin:0; color:var(--cinza-cl); max-width:34ch; }
.cta__dados{ margin:1rem 0 0; display:grid; grid-template-columns:auto 1fr; gap:.5rem 1.5rem; align-items:baseline; }
.cta__dados dd{ margin:0; }
.cta__dados a{ border-bottom:1px solid var(--linha-cl); padding-bottom:.1rem; transition:border-color .4s var(--ease); }
.cta__dados a:hover{ border-color:var(--latao-cl); }
.cta .form{ grid-column:7/13; }
.form__accao{ display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem; }
@media (max-width:900px){
  .cta__texto,.cta .form{ grid-column:1/-1; }
}