/* ==================================================================
   02 · SERVICOS  (widget fp-servicos)

   Copiado do lab (lab/home/secoes/servicos/servicos.css e
   lab/home/transicoes/hero-servicos.css). A partir daqui, este arquivo e o
   que vale. Diferenca em relacao ao lab: o numero de colunas e --n (o
   widget deixa escolher os servicos); com cinco, as medidas sao as mesmas.

   Navy. Cinco colunas com fio; o nome de cada servico em contorno, na
   vertical, de baixo para cima, todos subindo de uma linha de base comum.
   Hover, foco ou toque abre a coluna: placa petrol, contorno laranja, e a
   descricao longa, as etiquetas e o CTA sao descobertos sem se mover.
   ================================================================== */

.servicos{
  position:relative;
  overflow:clip;
  height:100svh;
  min-height:46rem;
  padding-block:clamp(4rem,9vh,6rem) clamp(1.5rem,4vh,3rem);
  background:var(--navy);
  color:var(--paper);
}
.servicos__caixa{height:100%;display:flex;flex-direction:column}

.servicos__topo{
  display:grid;
  /* --topo-e e --topo-d vem do controle "Coluna do titulo" do widget. */
  grid-template-columns:minmax(0,var(--topo-e,1.15fr)) minmax(0,var(--topo-d,1fr));
  column-gap:var(--gutter);
  align-items:end;
  margin-bottom:clamp(1.5rem,4vh,2.75rem);
}
.servicos__h2{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.25rem,min(4.2vw,7.4vh),4.25rem);
  line-height:.95;
  letter-spacing:-.037em;
  color:var(--paper);
  text-wrap:balance;
}
.servicos__intro{
  font-size:var(--t-body);
  line-height:1.6;
  color:rgba(251,251,250,.72);
  max-width:60ch;
  text-wrap:pretty;
}

/* ---- colunas ------------------------------------------------------ */

.colunas{
  /* --fs-nome e --base-nome vem de servicos.js: o maior tamanho em que o
     nome mais longo cabe na altura, e a linha comum de onde os nomes sobem. */
  --fs-nome:3.25rem;
  --base-nome:calc(var(--pad) + 9rem);
  /* Em .88 a cedilha de MANUTENCAO encostava na linha ao lado; em 1 ainda
     passava a poucos pixels a 1366. */
  --lh-nome:1.1;
  --n:5;
  --pad:clamp(1rem,1.5vw,1.75rem);
  /* Coluna recolhida: exatamente as duas linhas do nome mais o respiro. */
  --tira:calc(2 * var(--lh-nome) * var(--fs-nome) + 2 * var(--pad) + 1px);
  position:relative;
  container-type:inline-size;
  flex:1;
  min-height:0;
  display:flex;
}

/* Os fios sao pseudo-elementos, e nao bordas, para poderem ser desenhados
   de cima para baixo na entrada (--fio de 0 a 1). */
.colunas::after,.coluna::after{
  content:'';
  position:absolute;
  top:0;bottom:0;
  width:1px;
  background:var(--rule-dark);
  transform:scaleY(var(--fio,1));
  transform-origin:top;
  pointer-events:none;
}
.colunas::after{right:0}
.coluna::after{left:0}

.coluna{
  position:relative;
  flex:0 0 calc(100% / var(--n));
  min-width:0;
  overflow:hidden;
  cursor:default;
  transition:flex-basis .8s var(--ease-out);
}
.colunas.tem-ativo .coluna{flex-basis:var(--tira)}
.colunas.tem-ativo .coluna.is-ativo{flex-basis:calc(100% - (var(--n) - 1) * var(--tira))}
.coluna:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}

/* Placa aberta: o petrol do logo, chapado, porque o miolo das letras em
   contorno precisa ter exatamente a cor do fundo. */
.coluna::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--petrol);
  opacity:0;
  transition:opacity .6s var(--ease-out);
}
.coluna.is-ativo::before{opacity:1}

/* Nome: vertical, de baixo para cima, preso a linha de base comum. Nao
   muda de lugar nem de tamanho quando a coluna abre; so a cor do traco. */
.coluna__nome{
  position:absolute;
  left:var(--pad);
  bottom:var(--base-nome);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--fs-nome);
  line-height:var(--lh-nome);
  letter-spacing:.01em;
  text-transform:uppercase;
  white-space:nowrap;
}
.coluna__nome-in{
  display:block;
  -webkit-text-fill-color:var(--navy);
  -webkit-text-stroke:calc(2 * clamp(1.25px,.09vw,1.75px)) rgba(251,251,250,.62);
  paint-order:stroke fill;
  /* O miolo acompanha a placa: petrol entrando por opacidade sobre o navy
     passa exatamente pelas cores desta transicao de cor. */
  transition:-webkit-text-stroke-color .45s var(--ease-out),-webkit-text-fill-color .6s var(--ease-out);
}
.coluna.is-ativo .coluna__nome-in{-webkit-text-stroke-color:var(--orange);-webkit-text-fill-color:var(--petrol)}

/* Descricao curta: largura fixa da coluna em repouso, presa ao pe. */
.coluna__curta{
  position:absolute;
  left:var(--pad);
  bottom:var(--pad);
  width:calc(100cqw / var(--n) - 2 * var(--pad) - 1px);
  font-size:clamp(.9375rem,1vw,1.0625rem);
  line-height:1.5;
  color:rgba(251,251,250,.74);
  text-wrap:pretty;
  transition:opacity .35s .2s;
}
.coluna__curta-in{display:block}
.colunas.tem-ativo .coluna:not(.is-ativo) .coluna__curta{opacity:0;transition:opacity .12s}

/* O que a coluna aberta revela. Largura fixa igual a da area final: o
   texto ja nasce quebrado no lugar e so e descoberto. */
.coluna__mais{
  position:absolute;
  top:var(--pad);
  bottom:var(--pad);
  left:calc(100cqw / var(--n) + var(--gutter));
  width:calc(100cqw - (var(--n) - 1) * var(--tira) - 100cqw / var(--n) - var(--gutter) - var(--pad));
  display:flex;
  flex-direction:column;
  opacity:0;
  transition:opacity .2s;
}
.coluna.is-ativo .coluna__mais{opacity:1;transition:opacity .5s .3s}
.coluna__longa{
  font-size:clamp(1rem,1.15vw,1.1875rem);
  line-height:1.6;
  color:rgba(251,251,250,.88);
  max-width:56ch;
  text-wrap:pretty;
}
.servicos .etiquetas{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .5rem;
  margin-top:clamp(1.25rem,3vh,2rem);
}
.servicos .etiquetas li{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--t-mono-sm);
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.2;
  padding:.5em .75em;
  border:1px solid var(--rule-dark-strong);
  color:rgba(251,251,250,.84);
}
.coluna .cta{margin-top:auto;align-self:flex-start}

/* ------------------------------------------------------------------
   Abaixo de 1100px
   ------------------------------------------------------------------ */

@media (max-width:1099.98px){
  .servicos{height:auto;min-height:0}
  .servicos__topo{grid-template-columns:1fr;row-gap:1rem}

  .colunas{flex-direction:column;container-type:normal;margin-top:.5rem}
  .colunas::after,.coluna::after{display:none}
  .coluna,.colunas.tem-ativo .coluna,.colunas.tem-ativo .coluna.is-ativo{
    flex:none;
    overflow:visible;
    border-top:1px solid var(--rule-dark);
    padding-block:1.5rem 1.75rem;
  }
  .coluna:last-child{border-bottom:1px solid var(--rule-dark)}
  .coluna::before{inset:0 calc(-1 * var(--margem))}
  .coluna__nome{
    position:relative;
    left:auto;bottom:auto;
    writing-mode:horizontal-tb;
    transform:none;
    font-size:min(10.5vw,3.25rem);
  }
  .coluna__curta,.colunas.tem-ativo .coluna:not(.is-ativo) .coluna__curta{
    position:relative;
    left:auto;bottom:auto;
    width:auto;
    margin-top:.9rem;
    opacity:1;
  }
  .coluna__mais{position:relative;left:auto;top:auto;bottom:auto;width:auto;display:none;opacity:1;margin-top:1.5rem}
  .coluna.is-ativo .coluna__mais{display:flex}
  .coluna .cta{margin-top:1.5rem}
}

/* ------------------------------------------------------------------
   Cortina: o hero fica preso e Servicos sobe por cima dele.

   No lab, o par hero + Servicos tinha um pai proprio (.cortina-par), que e
   o limite do sticky. Aqui o pai e o container do Elementor: os dois
   widgets precisam estar no mesmo container, um depois do outro. Quem
   fica preso e o involucro do widget, e nao a secao: a secao ocupa o
   involucro inteiro e nao teria para onde andar.

   As classes sao postas por servicos.js, so quando a cortina cabe
   (desktop com altura minima) e o widget esta com ela ligada. A regra do
   hero preso fica em hero.css: a Definicao das paginas internas usa a
   mesma.
   ------------------------------------------------------------------ */
.cortina .fp-cortina-servicos{position:relative;z-index:2}