/* ==========================================================================
   Mondra, páginas do portefólio (hoje: portefolio/kukii/)
   Carrega depois do styles.css e só nestas páginas. Todo o espaço sai
   das variáveis do :root (--e0 a --e9), como no resto do site.

   Uma página só, sem scroll em ecrã largo: a grelha ocupa a altura do
   ecrã menos a barra fixa, e os tamanhos que mais pesam (o título e o
   painel) seguem também a altura do ecrã (svh), para caber num
   portátil baixo.

     1. A grelha da página
     2. O resumo
     3. O painel: as janelas e o telemóvel
     4. A história: três colunas
     5. Seguir: as ligações
     6. Ecrãs pequenos
   ========================================================================== */


/* ==========================================================================
   1. A GRELHA
   A barra de cima é fixa: a página desce a altura dela antes do respiro
   (a mesma assimetria do hero, ver o README).
   ========================================================================== */
.kk-pagina {
  min-height: 100svh;
  padding-top: calc(var(--altura-nav) + var(--e5));
  padding-bottom: var(--e4);
  display: flex;
}

.kk-grelha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas:
    "intro    visual"
    "historia historia"
    "seguir   seguir";
  /* Em ecrãs altos sobra espaço: fica igual em cima e em baixo */
  align-content: center;
  column-gap: var(--e7);
  --kk-gap: var(--e5);
  row-gap: var(--kk-gap);
  align-items: center;
}
.kk-intro    { grid-area: intro; }
.kk-visual   { grid-area: visual; }
.kk-historia { grid-area: historia; align-self: start; }
.kk-seguir   { grid-area: seguir; }


/* ==========================================================================
   2. O RESUMO
   ========================================================================== */
.kk-intro .lombada { margin-bottom: var(--e2); }

/* O logótipo do cliente ao lado do nome. A linha tem sempre a altura
   do logótipo, haja logótipo ou não (a Areal não tem): assim o resto da
   página fica no mesmo sítio em todas as páginas do portefólio. */
.kk-intro {
  --kk-logo: clamp(4rem, 9svh, 5.5rem);
}
.kk-intro__marca {
  display: flex;
  align-items: center;
  gap: var(--e4);
  min-height: var(--kk-logo);
  margin-bottom: var(--e3);
}
.kk-intro__logo {
  flex: none;
  width: auto;
  height: var(--kk-logo);
}

/* Numa linha só, ao lado do logótipo */
.kk-intro__titulo {
  margin: 0;
  white-space: nowrap;
  font-size: clamp(2.4rem, min(4.2vw, 7svh), 3.8rem);
  line-height: 1;
}

.kk-intro__resumo {
  max-width: 42ch;
  margin-bottom: var(--e3);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--tinta);
}

/* O perfil do cliente: quatro factos, cada um com o rótulo pequeno por
   cima, entre duas linhas de costura. Os três curtos numa linha; o
   plano (mais comprido, e uma ligação para os planos) na linha de baixo,
   a toda a largura. */
.kk-perfil {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: var(--e3) var(--e5);
  margin: 0 0 var(--e5);
  padding-block: var(--e3);
  border-block: 1.5px dashed var(--linha-forte);
}
.kk-perfil > div:last-child { grid-column: 1 / -1; }
.kk-perfil dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sec-claro);
}
.kk-perfil dd {
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
  color: var(--noite);
}

/* O botão na sua própria linha, com a largura do texto */
/* O botão na sua linha, mais pequeno que os do site, e ao meio do
   espaço entre a costura do perfil e a da história. Para isso o resumo
   estica à altura da linha da grelha e desce para dentro do row-gap
   (margem negativa), e o botão usa margens automáticas. Só com duas
   colunas: numa coluna segue o fluxo normal. */
.kk-intro__btn {
  display: flex;
  width: fit-content;
  padding: 0.7rem 1.2rem;
  font-size: 0.92rem;
}
@media (min-width: 900px) {
  .kk-intro {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    margin-bottom: calc(-1 * var(--kk-gap));
  }
  /* Folga mínima igual dos dois lados (a margem do perfil em cima, o
     ::after em baixo); o que sobrar reparte-se pelas margens auto */
  .kk-intro .kk-perfil { margin-bottom: var(--e3); }
  .kk-intro::after { content: ""; flex: 0 0 var(--e3); }
  .kk-intro__btn { margin-block: auto; }
}


/* ==========================================================================
   3. O PAINEL
   Azul-noite, com os píxeis da marca. Proporção fixa (3/2, a mesma do
   comparador da Areal, para as páginas do portefólio terem o mesmo
   tamanho), com a
   largura limitada pela altura do ecrã: tudo lá dentro vai em
   percentagens e nunca sai da caixa. As duas janelas em diagonal, a de
   cima à esquerda e a de baixo à direita; o telemóvel, quando existe,
   pisa as duas, assente no fundo à esquerda.
   ========================================================================== */
.kk-visual {
  position: relative;
  justify-self: end;
  width: min(100%, calc(46svh * 3 / 2));
  aspect-ratio: 3 / 2;
  border-radius: var(--e2);
  background-color: var(--noite);
}
/* À frente dos píxeis (o main.js mete-os aqui dentro, com z-index 1 e 2) */
.kk-visual > img,
.kk-visual > figure { position: absolute; z-index: 3; }

.kk-janela--1 { top: 6%; left: 5%; width: 78%; }
.kk-janela--2 { bottom: 6%; right: 5%; width: 64%; }

/* O telemóvel por cima de tudo. A imagem fica sempre inteira, seja qual
   for a proporção dela. */
.kk-visual > .kk-visual__telemovel {
  z-index: 4;
  left: 3%;
  bottom: 0;
  width: 28%;
  height: 82%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 30px rgba(6, 18, 36, 0.5));
}

.kk-janela {
  margin: 0;
  overflow: hidden;
  border-radius: var(--e1);
  background-color: var(--branco);
  box-shadow: 0 4px 12px rgba(6, 18, 36, 0.30), 0 24px 48px rgba(6, 18, 36, 0.45);
}
.kk-janela img { width: 100%; height: auto; }

/* A barra da janela: três pontos e o endereço ao centro */
.kk-janela__barra {
  display: flex;
  align-items: center;
  gap: var(--e0);
  padding: var(--e1) var(--e2);
  background-color: var(--papel-alt);
}
.kk-janela__barra i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background-color: var(--linha-forte);
}
.kk-janela__barra span {
  flex: 0 1 12rem;
  margin-inline: auto;
  padding: 0 var(--e2);
  border-radius: var(--e5);
  background-color: var(--branco);
  font-size: 0.65rem;
  line-height: 1.6;
  text-align: center;
  color: var(--sec-claro);
}
/* O mesmo espaço dos três pontos, do lado direito: o endereço fica
   mesmo ao centro */
.kk-janela__barra::after {
  content: "";
  width: calc(0.45rem * 3 + var(--e0) * 2);
}


/* O comparador antes/depois (página da Areal), no lugar do painel.
   O palco é 3/2 (as capturas são 1200x800), com a largura limitada pela
   altura do ecrã, como o painel. Os factos ficam sempre dentro do palco:
   a regra dos 1200px do styles.css pendura-os para fora, onde aqui
   estaria o texto. */
.kk-comparar {
  grid-area: visual;
  justify-self: end;
  width: min(100%, calc(46svh * 3 / 2));
  max-width: none;
  margin: 0;
}
@media (min-width: 1200px) {
  .kk-comparar .comparar__factos { width: auto; gap: 6px; }
  .kk-comparar .comparar__factos--antes  { left: 14px; right: auto; align-items: flex-start; text-align: left; }
  .kk-comparar .comparar__factos--depois { right: 14px; left: auto; align-items: flex-end; text-align: right; }
}

/* Cada imagem abre em grande ao clicar (js/portefolio.js) */
.kk-visual img[data-ampliar] { cursor: zoom-in; }
.kk-janela { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.kk-janela:hover { transform: translateY(-3px); }
.kk-visual img[data-ampliar]:focus-visible { outline: 3px solid var(--laranja-esc); outline-offset: 2px; }

/* A imagem em grande, dentro do dialog .ampliar do styles.css: a maior
   que cabe no ecrã, sem cortar */
.kk-ampliada {
  /* deixa uma faixa de cada lado para as setas (48px + folga) */
  max-width: calc(100vw - 2 * (48px + 2 * var(--e3)));
  max-height: calc(100vh - 2 * var(--e7));
  width: auto;
  height: auto;
  border-radius: var(--e1);
  box-shadow: 0 24px 60px rgba(6, 18, 36, 0.5);
  cursor: zoom-out;
}
/* As setas da imagem em grande: redondas, iguais ao botão de fechar do
   dialog, a meio da altura, uma de cada lado */
.kk-seta {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(244, 246, 249, 0.14);
  color: var(--papel);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.16s ease;
}
.kk-seta[hidden] { display: none; }
.kk-seta:hover { background-color: rgba(244, 246, 249, 0.26); }
.kk-seta:focus-visible { outline: 3px solid var(--laranja-esc); outline-offset: 2px; }
.kk-seta svg { width: 22px; height: 22px; }
.kk-seta--anterior { left: var(--e3); }
.kk-seta--seguinte { right: var(--e3); }
/* No telemóvel as setas descem para o fundo, para não taparem a imagem */
@media (max-width: 600px) {
  .kk-seta { top: auto; bottom: var(--e4); transform: none; }
  .kk-ampliada { max-width: calc(100vw - 2 * var(--e3)); }
}

@media (prefers-reduced-motion: reduce) {
  .kk-janela { transition: none; }
  .kk-janela:hover { transform: none; }
}


/* ==========================================================================
   4. A HISTÓRIA
   Três colunas, cada uma com a linha de costura por cima.
   ========================================================================== */
.kk-historia {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e5);
  counter-reset: kk-passo;
}

.kk-bloco {
  padding-top: var(--e3);
  border-top: 1.5px dashed var(--linha-forte);
  font-size: 0.98rem;
  line-height: 1.6;
}
.kk-bloco p + p { margin-top: var(--e2); }
.kk-bloco strong { color: var(--noite); }

.kk-bloco__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  margin: 0 0 var(--e1);
  font-size: 1.35rem;
}
/* O número do passo, no acento, antes do título */
.kk-bloco__titulo::before {
  counter-increment: kk-passo;
  content: counter(kk-passo) ".";
  color: var(--laranja-cla);
}


/* ==========================================================================
   5. SEGUIR
   Numa linha: o Portal Mondra, o voltar, e o que o rodapé tinha de
   obrigatório (a ligação à segurança), encostado à direita.
   ========================================================================== */
.kk-seguir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  padding-top: var(--e3);
  border-top: 1.5px solid var(--linha);
}

/* Os dois botões, no desenho dos do site: o do Portal cheio a
   azul-noite (o laranja fica só para visitar a loja), o Voltar de
   contorno. A seta do Voltar anda para a esquerda ao passar o rato. */
.kk-btn-noite {
  background-color: var(--noite);
  color: var(--papel);
}
.kk-btn-noite:hover { background-color: var(--tinta); }

.kk-btn-linha {
  border-color: var(--linha-forte);
  background-color: var(--papel);
  color: var(--noite);
  box-shadow: none;
}
.kk-btn-linha:hover:not(:disabled) {
  border-color: var(--noite);
  box-shadow: none;
}
.kk-btn-linha:hover .btn__icone { transform: translateX(-4px); }

.kk-seguir__legal {
  margin: 0 0 0 auto;
  font-size: 0.82rem;
  color: var(--sec-claro);
}
.kk-seguir__legal .link { font-weight: 400; color: var(--sec-claro); }
/* Em ecrã de toque, as ligações pequenas têm a altura de um alvo (44px).
   A do plano cresce para fora (padding com margem negativa igual), para
   não mexer na altura do perfil. */
@media (pointer: coarse) {
  .kk-seguir__legal .link { display: inline-flex; align-items: center; min-height: 44px; }
  .kk-perfil a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
}



/* ==========================================================================
   6. ECRÃS PEQUENOS
   Abaixo dos 900px a página deixa de caber num ecrã: passa a uma coluna,
   pela ordem do HTML, e a história empilha-se.
   ========================================================================== */
@media (max-width: 899px) {
  .kk-pagina { min-height: 0; }
  .kk-grelha {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "visual" "historia" "seguir";
    grid-template-rows: none;
    row-gap: var(--e5);
  }
  .kk-visual,
  .kk-comparar { justify-self: stretch; width: 100%; }
  .kk-historia { grid-template-columns: minmax(0, 1fr); gap: var(--e4); }
}

@media (max-width: 600px) {
  .kk-pagina { padding-top: calc(var(--altura-nav) + var(--e4)); }
  .kk-grelha { row-gap: var(--e4); }
  .kk-intro__resumo { font-size: 1.08rem; }
  .kk-perfil { gap: var(--e2) var(--e4); margin-bottom: var(--e4); padding-block: var(--e2); }
  .kk-perfil dd { font-size: 0.92rem; }
  .kk-intro__marca { gap: var(--e3); }
  .kk-intro { --kk-logo: 3.5rem; }
  .kk-intro__titulo { font-size: 2.2rem; }
  .kk-intro__btn { width: 100%; }

  .kk-historia { gap: var(--e3); }
  .kk-bloco { padding-top: var(--e2); font-size: 0.94rem; }
  .kk-bloco__titulo { font-size: 1.2rem; }

  .kk-janela__barra { padding: var(--e0) var(--e1); }
  .kk-janela__barra span { font-size: 0.55rem; }

  .kk-seguir .btn { width: 100%; }
  .kk-seguir__legal { margin-left: 0; width: 100%; }
}

/* Portáteis (até 920px de altura): tudo um degrau mais junto,
   para a página continuar a caber sem scroll */
@media (min-width: 900px) and (max-height: 920px) {
  .kk-pagina { padding-top: calc(var(--altura-nav) + var(--e3)); padding-bottom: var(--e2); }
  .kk-grelha { --kk-gap: var(--e3); }
  .kk-visual,
  .kk-comparar { width: min(100%, calc(42svh * 3 / 2)); }
  .kk-intro .lombada { margin-bottom: var(--e1); }
  .kk-intro { --kk-logo: 3.5rem; }
  .kk-intro__marca { margin-bottom: var(--e2); }
  .kk-intro__resumo { margin-bottom: var(--e2); font-size: 1.05rem; }
  .kk-perfil { gap: var(--e1) var(--e5); margin-bottom: var(--e3); padding-block: var(--e1); }
  .kk-perfil dd { font-size: 0.92rem; }
  .kk-bloco { padding-top: var(--e2); font-size: 0.88rem; line-height: 1.45; }
  .kk-bloco p + p { margin-top: var(--e1); }
  .kk-bloco__titulo { font-size: 1.15rem; }
  .kk-seguir { padding-top: var(--e2); }
  .kk-seguir .btn { padding-block: 0.75rem; }
}