/* ==========================================================================
   Teixeira IP — Portal do Cliente

   Área nova em arquivo próprio. Nada aqui redefine regra de site.v2.css: só
   acrescenta a modificadora `.page-head--portal` e reusa os tokens que já
   existem lá. Carregar SEMPRE depois de site.v2.css.

   Modificadora, e não `.page-head`, para que nenhuma outra página interna
   herde esta foto por acidente. Mesma decisão do acervo.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Por que o véu aqui é muito mais leve que o do acervo

   A foto do acervo é clara e azul-fria: exige 94% de tinta à esquerda para o
   texto sobreviver. Esta é o contrário. O terço esquerdo dela mede 13 de 255
   em luminância — mais escuro que o próprio `--ink`, que fica perto de 24.
   Texto claro já contrasta sem ajuda nenhuma.

   O véu aqui existe para outra coisa: aproximar o azul-marinho da foto do
   verde-petróleo do site, e segurar a leitura nas larguras intermediárias,
   onde o objeto começa a invadir a coluna do texto. Nada além disso.

   A imagem também não foi dessaturada na geração, ao contrário da do acervo.
   O dourado dela é praticamente o `--brass` da paleta — tratar seria apagar a
   única coisa que já estava certa.
--------------------------------------------------------------------------- */

.page-head--portal { isolation: isolate; }

/* Celular: o texto ocupa a largura inteira, então a tinta precisa ser
   uniforme e mais firme do que no desktop. */
.page-head--portal::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image:
    linear-gradient(180deg,
      rgba(14, 26, 30, .40) 0%,
      rgba(14, 26, 30, .62) 45%,
      rgba(14, 26, 30, .82) 100%),
    url("../img/portal-hero-900.v2.webp");
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, cover;
  background-position: center, center 50%;
  pointer-events: none;
}

.page-head--portal::before { z-index: -1; }

/* Desktop: a composição da foto já reserva a esquerda para o texto. A tinta
   só encosta, e o dossiê aparece quase limpo à direita. */
@media (min-width: 760px) {
  .page-head--portal::after {
    background-image:
      linear-gradient(100deg,
        rgba(14, 26, 30, .52) 0%,
        rgba(14, 26, 30, .40) 34%,
        rgba(14, 26, 30, .14) 64%,
        rgba(14, 26, 30, .03) 100%),
      url("../img/portal-hero.v2.webp");
    background-size: 100% 100%, cover;
    background-position: center, center 50%;
  }
}

/* Larguras intermediárias: o objeto avança sobre a coluna do texto antes de
   o layout ter espaço para os dois. A tinta compensa. */
@media (min-width: 760px) and (max-width: 1080px) {
  .page-head--portal::after {
    background-image:
      linear-gradient(100deg,
        rgba(14, 26, 30, .70) 0%,
        rgba(14, 26, 30, .58) 40%,
        rgba(14, 26, 30, .28) 72%,
        rgba(14, 26, 30, .10) 100%),
      url("../img/portal-hero.v2.webp");
    background-size: 100% 100%, cover;
    background-position: center, center 50%;
  }
}

/* A malha de prancheta desta página nasce da esquerda, para não riscar o
   dossiê. `.page-head::before` já a desenha; aqui só muda a máscara. */
.page-head--portal::before {
  -webkit-mask-image: radial-gradient(90% 100% at 4% 0%, #000 18%, transparent 62%);
  mask-image: radial-gradient(90% 100% at 4% 0%, #000 18%, transparent 62%);
}

/* ==========================================================================
   O botão de login — 0.040

   Destoa da paleta de propósito. O site inteiro é petróleo, latão e papel;
   este botão é azul de sistema operacional, arredondado, com sombra. Ele não
   é um elemento editorial: é uma porta. O contraste com tudo em volta é a
   sinalização — quem tem conta acha em meio segundo, e quem não tem entende
   na hora que aquilo não é para ele.

   Decisão de Márcio em 23/08/2026. Não "harmonizar" depois.
   ========================================================================== */
.pc-login {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: clamp(1.6rem, 4vw, 2.4rem);

  background: #3B7DF7;
  border: 1px solid #2D63C8;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .18);

  color: #fff;
  font: 500 1.02rem/1 var(--body);
  letter-spacing: -.005em;
  padding: .95rem 1.6rem;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.pc-login:hover { background: #4E8BFA; }
.pc-login:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.pc-login:focus-visible { outline: 2px solid #8FB6FF; outline-offset: 3px; }
.pc-login svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; }

/* ==========================================================================
   O rodízio de dúvidas

   O `.problem-block` do site.v2.css já dá a barra âmbar, o itálico e a
   serifa. Aqui só se reserva a altura, para a página não pular quando a
   frase troca de tamanho.
   ========================================================================== */
#pc-duvida { display: block; min-height: calc(3 * 1.35em); }
@media (min-width: 720px) { #pc-duvida { min-height: calc(2 * 1.35em); } }

.pc-slogan {
  font: 500 .72rem/1.4 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 .9rem;
}

/* ==========================================================================
   O aviso de área em construção
   ========================================================================== */
.pc-aviso {
  border: 1px solid var(--rule);
  border-left: 2px solid #3B7DF7;
  border-radius: 2px;
  background: var(--paper-hi);
  padding: clamp(1.3rem, 3vw, 2rem);
  margin-top: 1.8rem;
  max-width: 46rem;
  position: relative;
}
.pc-aviso h3 {
  font: 300 var(--step-2)/1.2 var(--display);
  letter-spacing: -.02em; margin: 0 0 .7rem; max-width: 26ch;
}
.pc-aviso p { color: var(--graphite); margin: 0 0 1rem; max-width: 56ch; }
.pc-fechar {
  position: absolute; top: .7rem; right: .7rem;
  background: none; border: 0; cursor: pointer; line-height: 1;
  color: var(--graphite-2); font: 400 1.5rem/1 var(--body); padding: .2rem .5rem;
}
.pc-fechar:hover { color: var(--ink); }

.pc-acoes { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }

.pc-news { margin-top: 1.2rem; }
.pc-news-linha { display: grid; gap: .6rem; }
@media (min-width: 620px) {
  .pc-news-linha { grid-template-columns: 1fr auto; align-items: end; }
}
.pc-news label.campo-rot {
  display: block;
  font: 500 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--graphite); margin-bottom: .45rem;
}
.pc-news input[type="email"] {
  width: 100%; background: #fff; border: 1px solid var(--rule);
  border-radius: 2px; color: var(--ink);
  font: 400 1rem/1.5 var(--body); padding: .8rem .9rem;
}
.pc-news input[type="email"]:focus { outline: none; border-color: #3B7DF7; }
.pc-aceite {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .88rem; color: var(--graphite); margin: .9rem 0 0; cursor: pointer;
}
.pc-aceite input { margin-top: .25rem; accent-color: #3B7DF7; }
.pc-nota { font-size: .85rem; color: var(--graphite); min-height: 1.4rem; margin: .7rem 0 0; }

@media (prefers-reduced-motion: reduce) {
  .pc-login { transition: none; }
}