/* ==========================================================================
   Area do cliente — /area-do-cliente

   Uma folha para a pagina inteira. Nada aqui conhece um portal: tudo vem
   de config/site.php ('portals' e 'area_cliente_page').

   Composicao, de cima para baixo:
     .ac-hero     topo curto: texto a esquerda, painel de atalhos a direita
     .ac-panel    o painel escuro: uma necessidade por linha, cada uma um
                  link para o portal certo
     (a casca editorial .page-* e a razao .ledger sao componentes)
     .gates       um cartao por portal, lado a lado no desktop
     .access      os passos do primeiro acesso e o aviso de seguranca
     .safety      o aviso: o escritorio nunca pede a senha

   Principio herdado das outras paginas: fio fino, um unico bloco escuro
   por tela e o vermelho so como assinatura.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Topo
   -------------------------------------------------------------------------- */
.ac-hero {
  position: relative;
  /* Contexto proprio para o fundo vivo (.backdrop) ficar atras do cartao. */
  isolation: isolate;
  /* Mesmo degrau do topo das tabelas: o texto divide a janela com um painel
     e a promessa e curta. Tudo limitado por vh para caber sem rolagem. */
  --fs-display: clamp(1.75rem, min(0.7rem + 5.4vw, 8.6vh), 5.5rem);
  --ac-pad: var(--page-hero-pad);
  --ac-gap: clamp(0.5rem, min(2.2vw, 1.9vh), 1.375rem);

  padding: var(--hero-top) var(--shell-pad) var(--shell-pad);
}

.ac-hero__card {
  position: relative;
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* O mesmo halo quente das outras paginas, recortado pelo raio do cartao. */
.ac-hero__glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.ac-hero__glow::after {
  content: "";
  position: absolute;
  top: -34%;
  right: -10%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-tint) 0%, transparent 68%);
}

.ac-hero__main {
  position: relative;
  display: grid;
  gap: calc(var(--ac-gap) * 1.8);
  padding: var(--ac-pad);
}

.ac-hero__content {
  display: grid;
  align-content: end;
  gap: var(--ac-gap);
  min-width: 0;
  container-type: inline-size;
}

.ac-hero__headline {
  display: grid;
  gap: 0.06em;
  margin-left: -0.04em; /* alinhamento optico da haste */
}

/* O sobretitulo carrega o nome da pagina dentro do H1; as linhas grandes
   ficam livres para falar com o cliente. */
.ac-hero__kicker {
  display: block;
  padding-bottom: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-strong);
}

.ac-hero__lead {
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-70);
}

.ac-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

/* O rotulo curto (so o nome do portal) existe para a coluna estreita. */
.ac-hero__label--short {
  display: none;
}

/* Coluna estreita: os dois botoes dividem a linha em vez de empilhar, e o
   rotulo encurta para o nome do portal. Uma linha extra custa ~50px,
   exatamente o que tiraria o topo da janela. */
@container (max-width: 26rem) {
  .ac-hero__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 0.75rem;
    font-size: 0.8125rem;
  }

  .ac-hero__label--full {
    display: none;
  }

  .ac-hero__label--short {
    display: inline-block;
  }
}

.ac-hero__visual {
  position: relative;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Painel de atalhos — o unico bloco escuro do topo. Cada linha e uma
   necessidade ("holerite") e o portal que a resolve; a linha inteira e o
   link. As linhas entram uma por vez, de cima para baixo, no ritmo do
   painel do hero da home (--row-stagger / --dur-row).
   -------------------------------------------------------------------------- */
.ac-panel {
  position: relative;
  display: grid;
  gap: clamp(0.75rem, min(1.6vw, 1.6vh), 1.125rem);
  padding: clamp(0.875rem, min(1.8vw, 1.8vh), 1.5rem);
  border-radius: var(--radius-panel);
  background: var(--surface-ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  opacity: 0;
  animation: panel-in var(--dur-reveal) var(--ease-out) 420ms forwards;
}

.ac-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, rgba(229, 50, 45, 0) 62%);
}

.ac-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* O chip de status foi desenhado para fundo claro; aqui so muda a tinta. */
.ac-panel .status-chip {
  color: var(--on-ink);
}

.ac-panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, min(0.9rem + 1.1vw, 2.4vh), 1.4375rem);
  font-weight: var(--fw-display);
  line-height: 1.15;
  letter-spacing: calc(-0.028em * var(--track-display));
}

.ac-panel__list {
  display: grid;
}

.ac-panel__row {
  border-top: 1px solid var(--line-on-ink);
  opacity: 0;
  animation: rise-in var(--dur-row) var(--ease-out) forwards;
  animation-delay: calc(760ms + var(--i, 0) * var(--row-stagger));
}

.ac-panel__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(0.4375rem, 1.1vh, 0.625rem);
  color: inherit;
}

.ac-panel__link:focus-visible {
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.ac-panel__k {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--on-ink-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

/* O destino, como etiqueta: o nome do portal e a seta para fora. */
.ac-panel__v {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
  padding: 0.25rem 0.5625rem;
  border: 1px solid var(--line-on-ink);
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.ac-panel__icon {
  width: 0.625rem;
  height: 0.625rem;
  flex: none;
  color: var(--on-ink-muted);
  transition:
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.ac-panel__icon path {
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .ac-panel__link:hover .ac-panel__k {
    color: var(--on-ink);
  }

  .ac-panel__link:hover .ac-panel__v {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
  }

  .ac-panel__link:hover .ac-panel__icon {
    color: var(--brand);
    transform: translate(2px, -2px);
  }
}

.ac-panel__seal {
  padding: clamp(0.625rem, 1.4vh, 0.875rem);
  border-radius: var(--radius-sm);
  background: var(--surface-ink-soft);
  border: 1px solid var(--line-on-ink);
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--on-ink-muted);
}

/* --------------------------------------------------------------------------
   Celular e tablet. O painel de atalhos vira uma faixa que rola no eixo
   horizontal: cada atalho e um cartao (a necessidade em cima, o portal
   embaixo), o topo continua curto e nada empilha cinco linhas.
   -------------------------------------------------------------------------- */
@media (max-width: 63.99rem) {
  .ac-panel__list {
    display: flex;
    gap: 0.5rem;
    margin-inline: calc(-1 * clamp(0.875rem, min(1.8vw, 1.8vh), 1.5rem));
    padding-inline: clamp(0.875rem, min(1.8vw, 1.8vh), 1.5rem);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .ac-panel__list::-webkit-scrollbar {
    display: none;
  }

  .ac-panel__row {
    flex: none;
    width: 10.5rem;
    border-top: 0;
    border-radius: 0.75rem;
    background: var(--surface-ink-soft);
    border: 1px solid var(--line-on-ink);
    scroll-snap-align: start;
  }

  .ac-panel__link {
    display: grid;
    justify-items: start;
    gap: 0.5rem;
    height: 100%;
    padding: 0.75rem 0.875rem;
  }

  .ac-panel__k {
    color: var(--on-ink);
  }

  .ac-panel__seal {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Os portais — um cartao por portal. O cartao e leitura (para que serve, o
   que tem dentro); a entrada e o botao. Nada flutua por cima do cartao.
   -------------------------------------------------------------------------- */
.gates {
  display: grid;
  gap: clamp(0.875rem, 0.6rem + 1.4vw, 1.5rem);
}

.gate {
  position: relative;
  display: grid;
  align-content: start;
  gap: clamp(1.125rem, 0.9rem + 1.2vw, 1.75rem);
  padding: clamp(1.25rem, 0.9rem + 1.8vw, 2.25rem);
  border-radius: var(--radius-panel);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .gate:hover {
    background: var(--surface);
    border-color: var(--line-strong);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
}

.gate__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.gate__n {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.gate__scope {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink-30);
}

.gate__intro {
  display: grid;
  gap: 0.375rem;
}

.gate__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  font-weight: var(--fw-display);
  line-height: 1;
  letter-spacing: calc(-0.034em * var(--track-display));
  color: var(--ink);
}

.gate__note {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink-50);
}

.gate__purpose {
  padding-top: 0.5rem;
  max-width: 40ch;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink-70);
  text-wrap: pretty;
}

.gate__label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-30);
}

/* Dentro do cartao a razao e sempre uma coluna: o cartao ja e estreito. */
.gate .ledger__list {
  grid-template-columns: minmax(0, 1fr);
}

.gate .ledger__row:last-child {
  border-bottom: 1px solid var(--line);
}

.gate__action {
  display: grid;
  justify-items: start;
  gap: 0.625rem;
  padding-top: 0.25rem;
}

.gate__login {
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--ink-30);
}

.gate__app {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 0.875rem;
  padding-top: 0.25rem;
  font-size: var(--fs-micro);
  color: var(--ink-50);
}

/* --------------------------------------------------------------------------
   Primeiro acesso — os passos a esquerda, o aviso de seguranca a direita
   -------------------------------------------------------------------------- */
.access {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  align-items: start;
}

.access__steps {
  min-width: 0;
}

/* Os passos sao uma sequencia: uma coluna sempre, mesmo no tablet. */
.access__steps.ledger {
  grid-template-columns: minmax(0, 1fr);
}

.access__steps .ledger__row:last-child {
  border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Aviso de seguranca — cartao claro, com a assinatura vermelha no rotulo,
   nao num bloco escuro: a barra de fechamento logo abaixo ja e escura.
   -------------------------------------------------------------------------- */
.safety {
  display: grid;
  gap: 0.75rem;
  padding: clamp(1.25rem, 0.9rem + 1.8vw, 2rem);
  border-radius: var(--radius-panel);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
}

.safety__label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-strong);
}

.safety__title {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.625rem);
  font-weight: var(--fw-display);
  line-height: 1.12;
  letter-spacing: calc(-0.032em * var(--track-display));
  color: var(--ink);
  text-wrap: balance;
}

.safety__note {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-70);
  text-wrap: pretty;
}

.safety__contact {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.safety__hours {
  display: grid;
  gap: 0.125rem;
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--ink-50);
}

.safety__phone {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}

.safety__phone:hover {
  color: var(--brand-strong);
}

/* --------------------------------------------------------------------------
   Fechamento — a barra escura, no cartao mais justo
   -------------------------------------------------------------------------- */
.ac-closing__card {
  padding: clamp(0.625rem, 0.4rem + 1vw, 1rem);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

/* Tablet: os dois portais lado a lado. */
@media (min-width: 48rem) {
  .gates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop: texto e painel dividem o topo; passos e seguranca, a secao 02. */
@media (min-width: 64rem) {
  .ac-hero__main {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(1.75rem, 3.5vw, 4rem);
  }

  .ac-hero__visual {
    display: flex;
    justify-content: flex-end;
  }

  .ac-panel {
    width: 100%;
    max-width: 25rem;
  }

  .access {
    grid-template-columns: minmax(0, 1.1fr) minmax(17rem, 0.9fr);
    gap: clamp(2rem, 3.4vw, 4rem);
  }

  .safety {
    position: sticky;
    top: calc(var(--header-h) + 3 * var(--shell-pad));
  }
}

/* Celular estreito: a linha de apoio desce um degrau para o topo caber. */
@media (max-width: 30rem) {
  .ac-hero {
    --ac-pad: var(--card-pad);
  }

  .ac-hero__lead {
    font-size: var(--fs-sm);
    line-height: 1.5;
  }

  .gate__btn {
    width: 100%;
  }
}

/* Celular pequeno em retrato (320x568): sai o que e apoio (eyebrow e o
   titulo do painel, que o chip ja diz) e a folga entre texto e painel
   encolhe. O topo continua inteiro na janela. */
@media (max-width: 30rem) and (max-height: 37rem) {
  .ac-hero__main {
    gap: var(--ac-gap);
  }

  .ac-panel__title,
  .ac-panel__seal {
    display: none;
  }

  .ac-panel {
    gap: 0.5rem;
  }
}

/* Janela baixa (celular deitado): duas colunas cedo, tipografia um degrau
   abaixo e descarte do que e acessorio, como nas outras paginas. */
@media (min-width: 40rem) and (max-height: 34rem) {
  .ac-hero {
    --fs-display: clamp(1.5rem, min(0.9rem + 5vw, 7.4vh), 3.25rem);
    --ac-pad: clamp(0.75rem, 3.1vh, 1.5rem);
  }

  .ac-hero__main {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 1.5rem;
  }

  .ac-hero__visual {
    display: flex;
    justify-content: flex-end;
  }

  .ac-hero__lead {
    font-size: var(--fs-sm);
    line-height: 1.45;
  }

  /* Tres atalhos ja dizem do que se trata; os portais estao logo abaixo. */
  .ac-panel__title,
  .ac-panel__seal,
  .ac-panel__row:nth-child(n + 4) {
    display: none;
  }

  .ac-panel {
    width: min(100%, 22rem);
    gap: 0.5rem;
  }

  /* Deitado o painel volta a ser lista vertical, mais compacta. */
  .ac-panel__list {
    display: grid;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .ac-panel__row {
    width: auto;
    border: 0;
    border-top: 1px solid var(--line-on-ink);
    border-radius: 0;
    background: transparent;
  }

  .ac-panel__link {
    display: flex;
    padding: 0.3125rem 0;
  }

  .ac-panel__k {
    color: var(--on-ink-muted);
  }

  .ac-hero__actions {
    flex-wrap: nowrap;
  }
}

@media (max-height: 30rem) {
  .ac-hero__lead {
    display: none;
  }
}

/* Celular pequeno deitado (568x320): nao ha altura para o painel ao lado
   nem embaixo do texto. Fica a mensagem e a acao, como no topo das paginas
   de servico; o conteudo do painel esta logo abaixo, na propria pagina. */
@media (max-width: 39.99rem) and (max-height: 34rem) {
  .ac-hero__visual {
    display: none;
  }
}