/* =============================================================
   ConnectVia · componentes
   Nenhum componente tem sombra, contorno completo ou canto maior
   que 4px. Elevação existe só em sobreposição real.
   ============================================================= */

/* -------------------------------------------------------------
   BOTÕES — três níveis. O preenchimento inverte com a superfície:
   é --cta-bg que faz isso, e é por isso que o botão nunca perde a
   aresta ao mudar de seção.
   ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 26px;
  border:0;border-radius:var(--r-sm);
  font-family:var(--font-ui);font-weight:var(--fw-strong);
  font-size:14.5px;letter-spacing:.01em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  background:var(--cta-bg);color:var(--cta-ink);
  transition:transform var(--t-fast) var(--ease),
             background-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease);
}
.btn:hover{background:var(--cta-bg-hover);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--lg{height:56px;padding:0 32px;font-size:15.5px}
.btn--ghost{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover{
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--ink);
}
.btn--text{
  height:auto;padding:0;background:none;box-shadow:none;color:inherit;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.24em;
  text-decoration-color:color-mix(in srgb,currentColor 38%,transparent);
  transition:text-decoration-color var(--t-base) var(--ease);
}
.btn--text:hover{background:none;transform:none;text-decoration-color:currentColor}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.38;pointer-events:none;transform:none}
.btn--block{width:100%}

@media (max-width:640px){
  .btn{height:52px}
  .btn--lg{height:56px}
}

/* link em texto */
.link{
  color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);
  transition:text-decoration-color var(--t-base) var(--ease);
}
.link:hover{text-decoration-color:currentColor}

/* -------------------------------------------------------------
   HEADER
   ------------------------------------------------------------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:300;
  height:var(--header-h);
  display:flex;align-items:center;
  padding:0 var(--pad-x);
  background:transparent;
  transition:height var(--t-base) var(--ease),
             background-color var(--t-base) var(--ease),
             backdrop-filter var(--t-base) var(--ease);
}
.header__inner{
  max-width:var(--content);margin:0 auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
}
/* Nas páginas interiores o cabeçalho nunca é transparente: não há herói
   escuro por baixo dele, e sem fundo próprio o logótipo ficava Areia
   sobre Areia no topo da página. */
.header--solid,
.header.is-scrolled{
  height:var(--header-h-scrolled);
  background:rgba(30,24,21,.96);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(220,200,164,.16);
}

.logo{display:flex;align-items:center;gap:.32em;text-decoration:none;color:var(--cv-areia);flex:none}
.logo__mark{width:24px;height:24px;flex:none}
.logo__word{
  font-family:var(--font-display);font-weight:400;
  font-variation-settings:'opsz' var(--opsz-display),'wght' 400;
  font-size:19px;letter-spacing:-.02em;line-height:1;white-space:nowrap;
}
.logo__word em{font-style:italic;color:var(--cv-champagne)}

.nav{display:flex;gap:clamp(18px,2.2vw,30px);align-items:center;list-style:none}
.nav a{
  position:relative;display:inline-block;
  font-size:15px;font-weight:var(--fw-medium);
  text-decoration:none;color:var(--cv-areia);padding:5px 0;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:currentColor;transition:width var(--t-base) var(--ease);
}
.nav a:hover::after{width:100%}
.nav a[aria-current="page"]{color:var(--cv-champagne)}
.nav a[aria-current="page"]::after{width:100%;background:var(--cv-champagne)}

.header__right{display:flex;align-items:center;gap:var(--s4)}
@media (max-width:900px){
  .nav,.header__cta{display:none}
}

/* seletor de mercado — texto, não bandeira */
.market{display:inline-flex;align-items:center}
.market a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 8px;
  font-size:12px;font-weight:var(--fw-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  text-decoration:none;color:var(--cv-areia);opacity:.5;
  transition:opacity var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.market a:hover{opacity:.8}
.market a[aria-current="true"]{opacity:1;color:var(--cv-champagne)}
.market__sep{width:1.5px;height:12px;background:var(--cv-areia);opacity:.3;
  transform:rotate(45deg);flex:none}

/* botão da gaveta */
.burger{
  display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center;
}
@media (max-width:900px){.burger{display:inline-flex}}
.burger span{display:block;width:20px;height:1px;background:var(--cv-areia);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:1px;background:var(--cv-areia);
  transition:transform var(--t-base) var(--ease),top var(--t-base) var(--ease);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}

/* -------------------------------------------------------------
   GAVETA MOBILE — momento editorial, não lista de links pequenos
   ------------------------------------------------------------- */
.drawer{
  position:fixed;inset:0;z-index:500;
  background:var(--cv-espresso);color:var(--cv-areia);
  padding:var(--s5) var(--pad-x) var(--s7);
  display:flex;flex-direction:column;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  /* visibility é uma propriedade discreta: se entrar na transição com
     duração, o valor só troca a meio caminho (110ms), e o foco enviado
     para dentro da gaveta no primeiro frame falha em silêncio. Aqui ela
     troca em 0s ao abrir, e só esconde no fim do fade ao fechar. */
  transition:opacity var(--t-base) var(--ease),
             transform var(--t-base) var(--ease),
             visibility 0s linear var(--t-base);
  box-shadow:var(--sh-overlay);
  overflow-y:auto;
}
.drawer.is-open{
  transform:none;opacity:1;visibility:visible;
  transition:opacity var(--t-base) var(--ease),
             transform var(--t-base) var(--ease),
             visibility 0s;
}
.drawer__top{display:flex;align-items:center;justify-content:space-between;
  min-height:var(--header-h-scrolled)}
.drawer__close{
  background:none;border:0;cursor:pointer;width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;position:relative;
}
.drawer__close::before,.drawer__close::after{
  content:"";position:absolute;width:16px;height:1px;background:var(--cv-areia);
}
.drawer__close::before{transform:rotate(45deg)}
.drawer__close::after{transform:rotate(-45deg)}
.drawer__nav{
  list-style:none;display:flex;flex-direction:column;gap:var(--s5);
  margin-top:var(--s8);
}
.drawer__nav a{
  font-family:var(--font-display);font-weight:400;
  font-variation-settings:'opsz' var(--opsz-display),'wght' 400;
  font-size:clamp(30px,9vw,40px);line-height:1;letter-spacing:-.022em;
  text-decoration:none;color:var(--cv-areia);
}
.drawer__foot{margin-top:auto;padding-top:var(--s7)}
.drawer__markets{display:flex;gap:var(--s2);margin-top:var(--s4)}
.drawer__markets a{
  flex:1;display:inline-flex;align-items:center;justify-content:center;
  height:48px;border-radius:var(--r-sm);text-decoration:none;
  font-size:13px;font-weight:var(--fw-medium);letter-spacing:.04em;
  color:var(--cv-areia);box-shadow:inset 0 0 0 1px rgba(246,242,236,.28);
}
.drawer__markets a[aria-current="true"]{
  color:var(--cv-champagne);box-shadow:inset 0 0 0 1px var(--cv-champagne);
}
body.is-locked{overflow:hidden}

/* -------------------------------------------------------------
   TAG
   ------------------------------------------------------------- */
.tag{
  display:inline-flex;align-items:center;height:24px;padding:0 9px;
  border-radius:var(--r-sm);
  font-size:10.5px;font-weight:var(--fw-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  white-space:nowrap;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.tags{display:flex;gap:6px;flex-wrap:wrap;list-style:none}

/* -------------------------------------------------------------
   MÉTRICAS — sem caixa, sem ícone, sem gráfico
   ------------------------------------------------------------- */
.metrics{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--col-gap);
  border-top:1px solid var(--line);padding-top:var(--s5);
  list-style:none;
}
.metrics--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.metrics--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.metric__v{
  font-family:var(--font-display);font-weight:400;
  font-variation-settings:'opsz' var(--opsz-display),'wght' 400;
  font-size:var(--fs-metric);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;   /* a coluna não dança ao trocar de mercado */
  color:var(--ink);
}
.metric__v .unit{color:var(--signal)}  /* só a unidade em Ember. Nunca o numeral. */
.metric__v .plus{opacity:.5}
.metric__k{
  display:block;font-size:11px;font-weight:var(--fw-medium);
  letter-spacing:var(--ls-label);text-transform:uppercase;
  margin-top:10px;color:var(--ink-3);
}
.metrics--sm .metric__v{font-size:clamp(28px,3vw,38px)}
@media (max-width:700px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s6)}
  .metrics--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
  .metrics--3 .metric__v{font-size:clamp(24px,7vw,32px)}
}

/* faixa de métricas com rolagem horizontal no herói mobile:
   a última fica meio visível — o corte é o convite, sem seta */
@media (max-width:640px){
  .metrics--scroll{
    display:flex;overflow-x:auto;gap:var(--s6);
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .metrics--scroll::-webkit-scrollbar{display:none}
  .metrics--scroll>li{flex:0 0 auto;min-width:34%;scroll-snap-align:start}
}

/* -------------------------------------------------------------
   REGISTRO — o substituto do card. Linha, fio, hover de fundo.
   ------------------------------------------------------------- */
.registros{list-style:none;margin-top:var(--s7)}
.registro{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,3fr) auto;
  gap:var(--col-gap);align-items:start;
  padding:var(--s5) var(--s4);
  margin:0 calc(var(--s4) * -1);
  border-top:1px solid var(--line);
  transition:background-color var(--t-base) var(--ease);
  position:relative;
}
.registro>*{min-width:0}
.registro:last-child{border-bottom:1px solid var(--line)}
.registro::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);
}
.registro:hover{background:var(--hover-ground)}
.registro:hover::before{opacity:1}
.registro__name{font-size:26px}
@media (max-width:900px){
  .registro{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .registro__name{font-size:23px}
}

/* -------------------------------------------------------------
   CASE — linha editorial, imagem alternando de lado
   ------------------------------------------------------------- */
.case{align-items:center}
.case+.case{margin-top:var(--s9);padding-top:var(--s9);border-top:1px solid var(--line)}
.case__media{grid-column:1/6}
.case__body{grid-column:7/13}
.case--flip .case__media{grid-column:8/13;order:2}
.case--flip .case__body{grid-column:1/7;order:1}
.case__claim{font-size:clamp(26px,3.4vw,42px);line-height:1.04;
  letter-spacing:-.02em;max-width:20ch}
@media (max-width:900px){
  .case__media,.case__body,
  .case--flip .case__media,.case--flip .case__body{grid-column:1/-1;order:initial}
  .case+.case{margin-top:var(--s8);padding-top:var(--s8)}
}

/* moldura de imagem — enquanto não há fotografia de produção, a
   ausência de imagem é uma opção legítima do sistema: campo
   Espresso com o arco cortado. Nunca placeholder de banco. */
.media{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  background:var(--cv-grafite);
}
.media--portrait{aspect-ratio:4/5}
.media--landscape{aspect-ratio:3/2}
/* imagem e vídeo preenchem a moldura da mesma maneira: o recorte é
   da moldura, não do ficheiro, para o mesmo asset servir em 4:5 e em
   21:9 sem se cortarem duas vezes */
.media__el,
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media__note{
  position:absolute;left:14px;bottom:12px;
  font-size:10.5px;font-weight:var(--fw-medium);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:#B3A79B;
}
/* máscara para texto sobre foto: chapada, nunca gradiente */
.media--masked::after{
  content:"";position:absolute;inset:0;background:rgba(30,24,21,.5);
}

/* -------------------------------------------------------------
   FORMULÁRIO — campo com fio inferior, nunca caixa
   ------------------------------------------------------------- */
.form{display:flex;flex-direction:column;gap:var(--s5);max-width:420px}
.field{display:flex;flex-direction:column;gap:var(--s2)}
.field__k{
  font-size:var(--fs-label);font-weight:var(--fw-medium);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  transition:color var(--t-base) var(--ease);
}
.field input,.field select,.field textarea{
  appearance:none;-webkit-appearance:none;
  background:transparent;border:0;border-bottom:1px solid var(--line-2);
  border-radius:0;height:52px;padding:0 2px;
  font-size:16.5px;color:var(--ink);
  transition:border-color var(--t-base) var(--ease);
}
.field textarea{height:96px;padding-top:14px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.8}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6259' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;
}
.field:focus-within .field__k{color:var(--focus)}
.field:focus-within input,.field:focus-within select,.field:focus-within textarea{
  border-color:var(--focus);border-bottom-width:2px;
}
.field__help{font-size:13px;line-height:1.5;color:var(--ink-3)}
.field__msg{font-size:13px;line-height:1.5;color:var(--danger);min-height:0}
.field.is-error input,.field.is-error select,.field.is-error textarea{
  border-color:var(--danger);border-bottom-width:2px;
}
.field.is-error .field__k{color:var(--danger)}
.form__note{font-size:13px;line-height:1.5;color:var(--ink-3);max-width:44ch}

/* -------------------------------------------------------------
   FAQ — sem moldura de acordeão. A diagonal é a afordância.
   ------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:minmax(0,1fr) 16px;gap:var(--s5);
  align-items:start;padding:22px 0;
  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.22;letter-spacing:-.012em;
  color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq__mk{
  width:13px;height:1.5px;background:var(--accent-gfx);
  transform:rotate(45deg);justify-self:end;margin-top:.62em;
  transition:transform var(--t-base) var(--ease);
}
.faq details[open] .faq__mk{transform:rotate(90deg)}
.faq__answer{padding:0 0 26px;font-size:16px;line-height:var(--lh-body);
  max-width:60ch;color:var(--ink-2)}

/* -------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------- */
.footer{
  padding:var(--s9) var(--pad-x) var(--s6);
  background:var(--ground);color:var(--ink);
}
.footer__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--s7);max-width:var(--content);margin:0 auto;
}
.footer__list{list-style:none;display:flex;flex-direction:column;gap:var(--s2);
  margin-top:var(--s4);font-size:14.5px}
.footer__list a{color:var(--ink);text-decoration:none}
.footer__list a:hover{text-decoration:underline;text-underline-offset:.2em}
.footer__bottom{
  max-width:var(--content);margin:var(--s7) auto 0;padding-top:var(--s4);
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
}
.footer__bottom a{color:inherit;text-decoration:underline;
  text-decoration-color:var(--line-2);text-underline-offset:.25em}
.footer__bottom a:hover{text-decoration-color:currentColor}
@media (max-width:640px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
}

/* -------------------------------------------------------------
   BARRA FIXA MOBILE — aparece depois da seção 03, some no CTA final
   ------------------------------------------------------------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:280;
  display:none;align-items:center;justify-content:space-between;gap:var(--s3);
  height:64px;padding:0 var(--s4);
  background:var(--cv-espresso);
  border-top:1px solid rgba(246,242,236,.16);
  transform:translateY(100%);
  transition:transform var(--t-base) var(--ease);
}
.sticky-cta.is-visible{transform:none}
.sticky-cta__promise{
  font-size:11px;font-weight:var(--fw-medium);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:#8C8078;
}
.sticky-cta .btn{height:40px;padding:0 16px;font-size:13px}
@media (max-width:900px){
  .sticky-cta{display:flex}
}