/* =============================================================
   ConnectVia · seções da homepage
   Dez movimentos. Nenhuma seção repete fundo e eixo da anterior
   ao mesmo tempo.
   ============================================================= */

/* -------------------------------------------------------------
   01 · HERÓI — Espresso, trilho A
   88vh e não 100vh: a barra do navegador móvel corta o 100vh.
   ------------------------------------------------------------- */
.hero{
  min-height:88vh;
  padding-top:calc(var(--header-h) + var(--s9));
  display:flex;align-items:center;
  overflow:hidden;
}
.hero__inner{width:100%}
.hero__grid{align-items:end}
.hero__title{max-width:14ch}
.hero__lede{margin-top:var(--s6);max-width:42ch}
.hero__actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s7)}
.hero__media{grid-column:9/13}
/* a imagem sangra pela direita e é cortada pela base da seção */
.hero__media .media{margin-right:calc(var(--pad-x) * -1)}
.hero__metrics{margin-top:var(--s8)}
.hero__arc{top:-18%;right:-12%;width:min(58vw,720px)}

@media (max-width:900px){
  .hero{
    min-height:0;
    padding-top:calc(var(--header-h) + var(--s7));
    padding-bottom:0;
  }
  /* a medida em ch da manchete é para desktop: a 44px ela partia
     "Agenda cheia" ao meio e o herói virava seis linhas em vez de três.
     No telefone quem compõe é o <br> e a largura do container. */
  .hero__title{max-width:none}
  /* no telefone a imagem desce para baixo do texto, em sangria total.
     O grid-column precisa de ser reposto aqui: .hero__media é declarado
     depois do reset de grid em base.css e ganhava a cascata. */
  .hero__media{grid-column:1/-1;margin:var(--s7) calc(var(--pad-x) * -1) 0}
  .hero__media .media{margin-right:0;border-radius:0;aspect-ratio:16/11}
  .hero__metrics{margin-top:var(--s6);padding-bottom:var(--sec-y)}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
}

/* -------------------------------------------------------------
   02 · PROVA — Areia, trilho C, sem título.
   Os números são o título: é a única seção sem H2.
   ------------------------------------------------------------- */
.proof__attr{margin-top:var(--s5)}

/* -------------------------------------------------------------
   03 · PROBLEMA — Papel, trilho B (inversão de eixo)
   ------------------------------------------------------------- */
.problem__stat{
  margin-top:var(--s7);
  font-size:clamp(24px,2.6vw,30px);   /* piso de 24px: Ember sobre claro é 3,4:1 */
  line-height:1.3;max-width:26ch;font-weight:var(--fw-medium);
}
.problem__stat .figure{color:var(--signal)}
@media (max-width:900px){
  /* a conclusão puxa a leitura: a frase vem antes dos sintomas */
  .problem__diagnosis{order:1}
  .problem__symptoms{order:2;margin-top:var(--s7)}
}

/* -------------------------------------------------------------
   04 · MÉTODO — Espresso, o momento assinatura.
   Uma única diagonal ascendente, quatro estações fixadas nela.
   A geometria é ancorada nos offsets das estações (150/100/50/0),
   e a linha passa 12px acima de cada uma — nunca cruza o texto.
   ------------------------------------------------------------- */
.metodo{position:relative;padding-top:var(--s6);margin-top:var(--s8)}
.metodo__line{
  position:absolute;top:0;left:0;width:100%;height:300px;
  pointer-events:none;overflow:visible;
}
.metodo__line line{
  stroke:var(--cv-champagne);stroke-width:1;opacity:.55;
  stroke-dasharray:1100;stroke-dashoffset:1100;
  transition:stroke-dashoffset 1400ms var(--ease);
}
.metodo.is-in .metodo__line line{stroke-dashoffset:0}

.stations{
  position:relative;list-style:none;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap);
}
.stations>li{min-width:0}
.station{
  opacity:0;transform:translateY(10px);
  transition:opacity 520ms var(--ease),transform 520ms var(--ease);
}
.metodo.is-in .station{opacity:1;transform:none}
.metodo.is-in .stations>li:nth-child(1) .station{transition-delay:200ms}
.metodo.is-in .stations>li:nth-child(2) .station{transition-delay:480ms}
.metodo.is-in .stations>li:nth-child(3) .station{transition-delay:760ms}
.metodo.is-in .stations>li:nth-child(4) .station{transition-delay:1040ms}
/* a subida: cada estação 50px acima da anterior */
.stations>li:nth-child(1){margin-top:150px}
.stations>li:nth-child(2){margin-top:100px}
.stations>li:nth-child(3){margin-top:50px}
.stations>li:nth-child(4){margin-top:0}

.station__n{
  display:block;
  font-family:var(--font-display);font-weight:400;
  font-variation-settings:'opsz' var(--opsz-display),'wght' 400;
  font-size:26px;line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums;margin-bottom:var(--s4);
}
.station__name{font-size:15px;font-weight:var(--fw-strong);margin:0}
.station__desc{font-size:13.5px;line-height:1.55;color:var(--ink-2);
  margin-top:var(--s2);max-width:32ch}
.station .tag{margin-top:var(--s3)}

@media (prefers-reduced-motion:reduce){
  .metodo__line line{stroke-dashoffset:0}
  .station{opacity:1;transform:none}
}
/* no telefone a diagonal vira vertical, mas a subida é preservada:
   cada estação desloca 9px mais para a direita */
@media (max-width:900px){
  .metodo{padding-left:0}
  .metodo__line{display:none}
  .stations{
    grid-template-columns:minmax(0,1fr);gap:var(--s7);
    border-left:1px solid rgba(220,200,164,.4);
  }
  .stations>li{margin-top:0 !important;padding-left:var(--s5)}
  .stations>li:nth-child(2){margin-left:9px}
  .stations>li:nth-child(3){margin-left:18px}
  .stations>li:nth-child(4){margin-left:27px}
}

/* -------------------------------------------------------------
   05 · SERVIÇOS — Areia, trilho D (registros)
   ------------------------------------------------------------- */
.services__head{align-items:end}

/* -------------------------------------------------------------
   05b · MODELOS — Espresso, trilho D com pré-visualização
   Uma galeria pede grelha de cards, e o sistema proíbe-a. Resolve-se
   com as mesmas linhas de fio dos serviços, cada uma a ganhar uma
   moldura com a pré-visualização do modelo à esquerda.
   ------------------------------------------------------------- */
.modelos{list-style:none;margin-top:var(--s8)}
.modelo{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,2fr);
  gap:var(--col-gap);align-items:center;
  padding:var(--s6) var(--s4);
  margin:0 calc(var(--s4) * -1);
  border-top:1px solid var(--line);
  transition:background-color var(--t-base) var(--ease);
  position:relative;
}
.modelo>*{min-width:0}
.modelo:last-child{border-bottom:1px solid var(--line)}
.modelo::before{
  content:"";position:absolute;left:var(--s4);right:var(--s4);top:-1px;height:1px;
  background:var(--accent-gfx);opacity:0;transition:opacity var(--t-base) var(--ease);
}
.modelo:hover{background:var(--hover-ground)}
.modelo:hover::before{opacity:1}
.modelo__shot{
  border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line-2);background:var(--ground-2);
}
.modelo__shot img{width:100%;height:auto;display:block}
.modelo__name{font-size:clamp(22px,2.4vw,30px)}
.modelo__desc{margin-top:var(--s3)}
.modelo__meta{display:flex;flex-direction:column;gap:var(--s4);align-items:flex-start}
@media (max-width:900px){
  .modelo{grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start}
  .modelo__meta{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
}

/* -------------------------------------------------------------
   06 · CASES — Papel, trilho B alternado
   ------------------------------------------------------------- */
.cases__list{list-style:none;margin-top:var(--s8)}

/* -------------------------------------------------------------
   07 · DIFERENCIAIS — Verde Via, a única seção verde
   ------------------------------------------------------------- */

/* -------------------------------------------------------------
   08 · MERCADOS — Areia. A única seção simétrica da página:
   a simetria é o argumento, dois mercados de peso igual.
   ------------------------------------------------------------- */
.markets{
  display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);
  gap:var(--s7);margin-top:var(--s8);
}
.markets>*{min-width:0}
.markets__rule{background:var(--line-2)}
.market-col__city{font-family:var(--font-display);font-weight:400;
  font-variation-settings:'opsz' var(--opsz-display),'wght' 400;
  font-size:24px;letter-spacing:-.014em;margin:var(--s3) 0 0}
.market-col__desc{margin-top:var(--s3);max-width:32ch}
.market-col .metrics{margin-top:var(--s6)}
/* o mercado ativo recebe fio superior aceso; o outro fica neutro */
.market-col--inactive .label{color:var(--ink-3)}
@media (max-width:900px){
  .markets{grid-template-columns:minmax(0,1fr);gap:var(--s8)}
  .markets__rule{display:none}
  /* o mercado ativo vem primeiro */
  .market-col--active{order:1}
  .market-col--inactive{order:2}
}

/* -------------------------------------------------------------
   09 · FAQ — Areia, trilho D. Título fixo à esquerda no desktop.
   ------------------------------------------------------------- */
.faq__aside{grid-column:1/5}
.faq__body{grid-column:6/13}
@media (min-width:901px){
  .faq__aside{position:sticky;top:calc(var(--header-h) + var(--s7));align-self:start}
}
@media (max-width:900px){
  .faq__aside,.faq__body{grid-column:1/-1}
  .faq__body{margin-top:var(--s7)}
}

/* -------------------------------------------------------------
   10 · CTA FINAL — Espresso com o único corte diagonal da página,
   e o único momento em que o Champagne é superfície.
   ------------------------------------------------------------- */
.cta{
  position:relative;overflow:hidden;
  /* espaço para a cunha entrar sem tocar no rótulo */
  padding-top:calc(var(--sec-y) + 6vw);
}
.cta__inner{position:relative;z-index:1}
.cta__title{max-width:17ch}
.cta__actions{display:flex;gap:var(--s5);flex-wrap:wrap;align-items:center;
  margin-top:var(--s7)}
.cta__scarcity{display:block;margin-top:var(--s7);color:var(--signal)}
.cta__form{margin-top:var(--s8);max-width:420px}
/* o formulário abre na mesma página, sob o botão — sem modal */
.cta__form[hidden]{display:none}
/* os canais vêm depois do formulário e mudam de assunto: o fio separa-os
   sem precisar de mais um título */
.cta__direct{margin-top:var(--s8);padding-top:var(--s6);max-width:640px;
  border-top:1px solid var(--line)}

/* canais em linhas de fio, como os serviços e os modelos: o sistema
   não tem cartões, e um bloco de contacto não é a excepção */
.channels{list-style:none;border-top:1px solid var(--line)}
.channel{
  display:grid;grid-template-columns:96px minmax(0,1fr);
  gap:2px var(--s5);align-items:baseline;
  padding:var(--s4) 0;border-bottom:1px solid var(--line);
}
.channel__k{grid-row:span 2;padding-top:3px}
.channel__v{
  color:var(--accent);text-decoration:none;font-size:16px;
  letter-spacing:.01em;
}
.channel__v:hover{text-decoration:underline;text-underline-offset:.25em}
.channel__hint{grid-column:2}
@media (max-width:560px){
  .channel{grid-template-columns:minmax(0,1fr)}
  .channel__k{grid-row:auto}
  .channel__hint{grid-column:1}
}

@media (max-width:900px){
  .cta{padding-bottom:calc(var(--sec-y) + 64px)}
  .cta__actions{flex-direction:column;align-items:stretch}
  .cta__actions .btn--lg{width:100%}
  .cta__actions .btn--text{align-self:center;margin-top:var(--s2)}
}


/* =============================================================
   PÁGINA DE MODELOS — o modelo corre dentro do site, não fora dele
   ============================================================= */
.showcase-page{padding-top:var(--header-h-scrolled)}

/* seletor de especialidade: linhas de fio na horizontal, o mesmo
   registro dos serviços virado de lado */
.switch{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--col-gap);margin-top:var(--s8);
  border-top:1px solid var(--line);
}
.switch__item{
  display:flex;flex-direction:column;gap:6px;
  padding:var(--s5) 0 var(--s4);
  text-decoration:none;color:var(--ink-3);
  border-top:1px solid transparent;margin-top:-1px;
  transition:color var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.switch__item:hover{color:var(--ink-2)}
.switch__item[aria-current="true"]{color:var(--ink);border-top-color:var(--accent-gfx)}
.switch__name{
  font-family:var(--font-display);font-weight:400;
  font-variation-settings:'opsz' var(--opsz-display),'wght' 400;
  font-size:clamp(19px,2vw,24px);line-height:1.15;letter-spacing:-.014em;
}
.switch__font{
  font-size:10.5px;font-weight:var(--fw-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ink-3);
}
@media (max-width:820px){
  .switch{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--col-gap)}
}

/* moldura de navegador: aqui não é decoração, é o que diz ao visitante
   que aquilo lá dentro é um site e não uma imagem */
.frame{
  margin:var(--s7) 0 0;
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;background:var(--ground-2);
}
.frame:focus{outline:none}
.frame:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.frame__bar{
  display:flex;align-items:center;gap:var(--s4);
  padding:10px var(--s4);border-bottom:1px solid var(--line);
}
.frame__dots{display:flex;gap:6px;flex:none}
.frame__dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2);display:block}
/* a moldura assenta em --ground-2, mais claro que o Espresso: o tom
   terciário cai para 4,33:1 aqui e passa a usar-se o secundário */
.frame__url{font-size:11.5px;color:var(--ink-2);letter-spacing:.04em}
.frame__foot .caption{color:var(--ink-2)}
.frame__stage{position:relative;background:#fff}
.frame__view{
  display:block;width:100%;height:min(74vh,760px);border:0;
}
.frame__view[hidden]{display:none}
.frame__foot{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);
  flex-wrap:wrap;padding:var(--s4) var(--s4) var(--s5);
  border-top:1px solid var(--line);margin:0;
}
@media (max-width:640px){
  .frame__view{height:min(64vh,520px)}
}

/* na pré-visualização publicada o iframe não resolve caminhos relativos:
   build_preview.py troca-o por uma captura, e esta é a moldura dela */
.frame__poster{display:block;width:100%;height:auto}


/* =============================================================
   PÁGINAS LEGAIS — uma coluna de leitura, com o índice ao lado
   ============================================================= */
.legal-page{padding-top:var(--header-h-scrolled)}
.legal{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:var(--col-gap) calc(var(--col-gap) * 2);
  align-items:start;
}
/* o índice acompanha a rolagem em ecrãs altos: numa política de dez
   secções, saber onde se está vale mais do que os 15rem que ocupa */
.legal__index{position:sticky;top:calc(var(--header-h-scrolled) + var(--s5))}
.legal__index ol{list-style:none;counter-reset:sec;margin-top:var(--s4);
  display:flex;flex-direction:column;gap:var(--s3)}
.legal__index li{counter-increment:sec;display:grid;
  grid-template-columns:1.8em minmax(0,1fr);gap:6px;font-size:14.5px;line-height:1.45}
.legal__index li::before{
  content:counter(sec,decimal-leading-zero);
  font-family:var(--font-ui);font-size:11.5px;letter-spacing:.08em;
  color:var(--ink-3);padding-top:3px;
}
.legal__index a{color:var(--ink-2);text-decoration:none}
.legal__index a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}

.legal__body{max-width:68ch}
.legal__sec + .legal__sec{margin-top:var(--s8);padding-top:var(--s7);
  border-top:1px solid var(--line)}
.legal__sec h2{font-size:var(--fs-h3);max-width:28ch}
.legal__sec p{margin-top:var(--s5)}
.legal__sec .list{margin-top:var(--s5)}
.legal__sec b{font-weight:var(--fw-strong)}
/* as ligações dentro do texto legal precisam de se ver como ligações:
   é onde está a autoridade de controlo e o livro de reclamações */
.legal__sec a{color:var(--accent);text-underline-offset:.2em}

@media (max-width:900px){
  .legal{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .legal__index{position:static}
  .legal__index ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .legal__index ol{grid-template-columns:minmax(0,1fr)}
}


/* =============================================================
   404 — o erro também é uma página do site, não uma folha branca
   ============================================================= */
.notfound{
  position:relative;overflow:hidden;
  min-height:70vh;display:flex;align-items:center;
  padding-top:calc(var(--header-h-scrolled) + var(--sec-y));
}
.notfound .section__inner{width:100%}
.notfound__arc{
  position:absolute;right:-6vw;top:50%;transform:translateY(-50%);
  width:min(46vw,520px);color:var(--cv-bronze);opacity:.5;pointer-events:none;
}
.notfound .list a{color:var(--accent);text-decoration:none;font-size:18px}
.notfound .list a:hover{text-decoration:underline;text-underline-offset:.25em}


/* =============================================================
   FECHO DE SECÇÃO — a linha que arruma o que ficou dito
   Uma frase por secção, em corpo maior que o texto e menor que a
   manchete. Vive na tinta secundária para não competir com o H2,
   e recua para a medida de leitura porque é para ser lida devagar.
   ============================================================= */
.fecho{
  margin-top:var(--s8);max-width:56ch;
  font-family:var(--font-display);
  font-size:clamp(19px,2vw,23px);line-height:1.34;
  letter-spacing:-.012em;color:var(--ink-2);
  font-variation-settings:'opsz' 40;
}
.fecho::before{
  content:"";display:block;width:22px;height:1px;
  background:var(--accent-gfx,var(--accent));margin-bottom:var(--s4);
}
/* no método a coluna é larga e o fecho pode acompanhar */
.fecho--wide{max-width:64ch}

/* detalhe por mercado, debaixo da descrição de cada coluna */
.market-col__detail{margin-top:var(--s4)}
/* a linha que separa traduzir de comunicar */
.markets__diff{
  font-family:var(--font-display);font-size:19px;line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);max-width:30ch;
}

/* o fecho do rodapé é a última coisa que se lê no site */
.footer__closing{
  max-width:26ch;font-family:var(--font-display);
  font-size:17.5px;line-height:1.32;letter-spacing:-.01em;
  color:var(--accent);
}