/* ==========================================================================
   Jooy Atlas — página temporária de contatos
   Tela única, navy, sem header nem rodapé do site: enquanto não há navegação,
   um header pela metade só atrapalha. Sai do ar quando a home real entrar.

   Desktop: duas colunas — marca e mensagem à esquerda, canais à direita.
   Mobile: uma coluna, na mesma ordem do HTML.
   ========================================================================== */

.holding {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 620px at 22% -12%, #0E2C48 0%, transparent 68%),
    var(--navy);
  color: var(--white);
}

.holding__interno {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: var(--e-8);
  padding-block: var(--e-6);
}

@media (min-width: 1024px) {
  .holding__interno {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: var(--e-9);
    align-items: center;
  }
}

/* ----- Coluna da esquerda: marca + mensagem ---------------------------- */
.holding__coluna { min-width: 0; }

.holding__marca { display: block; margin-bottom: var(--e-6); }

/* O slogan do lockup tem traço muito fino: abaixo de ~400 px de largura ele cai
   para menos de 1 px por haste e o antialiasing o transforma em borrão cinza.
   Daí a marca ser bem maior aqui do que seria no header do site. */
.holding__marca img {
  width: clamp(260px, 34vw, 480px);
  max-width: 100%;
  height: auto;
}

.holding__overline {
  color: var(--gold);            /* gold sobre navy: 7,6:1 — livre, inclusive em texto */
  margin-bottom: var(--e-4);
}

.holding__filete { margin-bottom: var(--e-5); }

/* Abaixo do --fs-h1 do sistema: nesta tela a marca é o elemento dominante, e
   o H1 encurtado devolve altura para a mensagem e os canais de contato. */
.holding__titulo {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  margin-bottom: var(--e-5);
  max-width: 20ch;
}

.holding__lead { color: var(--silver); max-width: 60ch; }

.holding__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

.holding__extra { margin-top: var(--e-6); max-width: 52ch; color: var(--silver); }

/* ----- Coluna da direita: canais de contato ---------------------------- */
.contatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e-6) var(--gutter);
  list-style: none;
  min-width: 0;
  padding-top: var(--e-7);
  border-top: 1px solid var(--white-a10);
}

@media (min-width: 1024px) {
  .contatos {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-6);
    padding: 0 0 0 var(--e-8);
    border-top: 0;
    border-left: 1px solid var(--white-a10);
  }
}

.contato { display: flex; gap: var(--e-4); align-items: flex-start; min-width: 0; }

/* Ícone dentro de contorno em arco — o motivo do §1.5, uso 2 de 2 nesta página */
.contato__icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--gold);
  border: 1px solid var(--white-a16);
  border-radius: 22px 22px 6px 6px;
}

.contato__texto { min-width: 0; }

.contato__rotulo {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: var(--e-2);
}

.contato__valor {
  font-size: var(--fs-body);
  font-weight: 500;
  font-style: normal;
  line-height: 1.5;
  color: var(--white);
  overflow-wrap: break-word;
}

.contato__valor a { color: var(--white); text-decoration: none; }
.contato__valor a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
.contato__valor a + a { display: block; }

.contato__nota {
  display: block;
  margin-top: var(--e-2);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--silver);
}

/* ----- Rodapé da tela -------------------------------------------------- */
.holding__rodape {
  padding-block: var(--e-5);
  border-top: 1px solid var(--white-a10);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--silver);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  justify-content: space-between;
  align-items: center;
}

/* ----- Telas baixas (notebook 768 px de altura) ------------------------ */
/* A marca grande é o pedido central desta tela, então não encolhe aqui: quem
   cede é o ritmo vertical. Assim a tela inteira ainda cabe sem rolagem em
   1366 × 768, que é o notebook mais apertado que ainda aparece. */
@media (min-width: 1024px) and (max-height: 860px) {
  .holding__interno   { padding-block: var(--e-4); }
  .holding__marca     { margin-bottom: var(--e-4); }
  .holding__filete    { margin-bottom: var(--e-3); }
  .holding__titulo    { margin-bottom: var(--e-4); }
  .holding__acoes     { margin-top: var(--e-4); }
  .holding__credenciais { margin-top: var(--e-4); padding-top: var(--e-4); }
  .holding__rodape    { padding-block: var(--e-4); }
}

@media (max-width: 640px) {
  .holding__interno { gap: var(--e-7); padding-block: var(--e-7) var(--e-6); }
  .holding__marca { margin-bottom: var(--e-6); }
  .contatos { padding-top: var(--e-6); }
}

/* ----- Linha de credenciais -------------------------------------------- */
/* Abrangência, homologação e norma: é dado, não canal de contato — por isso
   fica aqui embaixo da mensagem, e não na lista de contatos ao lado. */
.holding__credenciais {
  margin-top: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--white-a10);
  max-width: 66ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--silver);
}