/* Página da campanha (moldes/campanha.js).

   A página é uma pilha de secções escolhidas pelo cliente no gestor. A
   abertura usa o .hero do styles.css, os planos usam o .plans e o fecho
   o .closer; o resto vive aqui. Todas as secções partilham a mesma
   margem e o mesmo ritmo vertical, para qualquer ordem ficar bem. */

/* ---------- Planos ---------- */

/* Na homepage o .plans sobe 100dvh por cima da galeria pregada
   (styles.css). Aqui não há galeria: sem isto, os planos tapavam a
   abertura. */
.plans {
  margin-top: 0;
}

/* ---------- Secção genérica ---------- */

.seccao {
  padding: clamp(64px, 10vw, 120px) clamp(24px, 4vw, 48px);
  background: var(--color-black);
}
.seccao + .seccao {
  padding-top: 0;
}

.seccao__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 720px;
}

.seccao__titulo {
  margin: 0;
  font: 400 clamp(38px, 6vw, 96px)/1 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.seccao__titulo em {
  color: var(--color-red);
  font-style: normal;
}

.seccao__corpo {
  max-width: 560px;
  margin: 0;
  color: #ccc;
  font: 400 17px/1.6 var(--font-body);
}

.seccao__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

/* ---------- Texto com foto ---------- */

.seccao--foto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.seccao--foto + .seccao {
  padding-top: clamp(64px, 10vw, 120px);
}
.seccao--foto-esquerda .seccao__foto {
  order: -1;
}

.seccao__foto {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.seccao__foto-camada {
  position: relative;
  width: 100%;
  height: 100%;
}
.seccao__foto-camada img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Lista ---------- */

.seccao__lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px clamp(24px, 4vw, 64px);
  max-width: 1100px;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.seccao__lista li {
  position: relative;
  padding: 0 0 18px 20px;
  border-bottom: 1px solid var(--color-line);
  color: rgba(255, 255, 255, .8);
  font: 400 16px/1.5 var(--font-body);
}
.seccao__lista li::before {
  content: '';
  position: absolute;
  top: .75em;
  left: 0;
  width: 9px;
  height: 1px;
  background: var(--color-red);
}

/* ---------- Passos ---------- */

/* Os cartões dos valores do Sobre, numerados. */
.passos {
  display: grid;
  grid-template-columns: repeat(var(--colunas, 3), 1fr);
  gap: clamp(12px, 1.4vw, 20px);
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.passos--2 { --colunas: 2; }
.passos--4 { --colunas: 4; }

.passo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(28px, 2.6vw, 40px) clamp(22px, 2vw, 32px);
  background: var(--color-card);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .25s ease;
}
.passo:hover {
  border-color: rgba(193, 29, 38, .55);
}

.passo__numero {
  margin: 0;
  color: var(--color-red);
  font: 400 clamp(40px, 3.6vw, 56px)/1 var(--font-display);
}

.passo__nome {
  margin: 0;
  font: 400 clamp(26px, 2.4vw, 36px)/1 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
}

.passo__texto {
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font: 400 15px/1.5 var(--font-body);
}

/* ---------- Números ---------- */

/* Como os números do Sobre, mas parados: os valores podem ser texto
   ("0 €", "24h"), por isso não contam. */
.contagem {
  display: grid;
  grid-template-columns: repeat(var(--colunas, 3), 1fr);
  background: var(--color-black-alt);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.contagem--2 { --colunas: 2; }

.contagem__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 48px);
}
.contagem__item + .contagem__item {
  border-left: 1px solid var(--color-line);
}

.contagem__valor {
  margin: 0;
  font: 400 clamp(64px, 9vw, 150px)/.9 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.contagem__legenda {
  margin: 0;
  color: rgba(255, 255, 255, .55);
  font: 600 13px var(--font-body);
  letter-spacing: .3em;
  text-transform: uppercase;
}

/* ---------- Fotos ---------- */

/* Faixa de fotos lado a lado, de ponta a ponta, sem espaço entre elas. */
.fotos {
  display: grid;
  grid-template-columns: repeat(var(--colunas, 3), 1fr);
  background: var(--color-black);
}
.fotos--2 { --colunas: 2; }
.fotos--4 { --colunas: 4; }

.fotos__peca {
  margin: 0 -1px 0 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.fotos__camada {
  position: relative;
  width: 100%;
  height: 100%;
}
.fotos__camada img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Perguntas ---------- */

.perguntas {
  max-width: 900px;
  margin: clamp(40px, 5vw, 64px) 0 0;
  border-top: 1px solid var(--color-line);
}

.pergunta {
  border-bottom: 1px solid var(--color-line);
}

.pergunta__pergunta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  font: 600 16px/1.4 var(--font-body);
  list-style: none;
  cursor: pointer;
  transition: color .2s ease;
}
.pergunta__pergunta::-webkit-details-marker {
  display: none;
}
.pergunta__pergunta:hover {
  color: var(--color-red-light);
}
.pergunta__pergunta:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 4px;
}

/* Um + feito de duas riscas retas; a vertical deita-se ao abrir e fica
   um −. */
.pergunta__sinal {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.pergunta__sinal::before,
.pergunta__sinal::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: var(--color-red);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.pergunta__sinal::after {
  transform: rotate(90deg);
}
.pergunta[open] .pergunta__sinal::after {
  transform: rotate(0deg);
}

.pergunta__resposta {
  max-width: 680px;
  margin: 0;
  padding: 0 0 24px;
  color: rgba(255, 255, 255, .7);
  font: 400 15px/1.6 var(--font-body);
}

/* ---------- Condições ---------- */

/* Letra pequena, à vista: uma promoção não esconde as condições. */
.condicoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 48px);
  background: var(--color-black);
  border-top: 1px solid var(--color-line);
}

.condicoes__titulo {
  margin: 0 0 4px;
  color: #666;
  font: 600 11px var(--font-body);
  letter-spacing: .28em;
  text-transform: uppercase;
}

.condicoes__texto {
  max-width: 720px;
  margin: 0;
  color: #666;
  font: 400 13px/1.6 var(--font-body);
}

/* ---------- Responsive ---------- */

@media (max-width: 1150px) {
  .passos--4,
  .fotos--4 {
    --colunas: 2;
  }
}

@media (max-width: 900px) {
  .seccao--foto {
    grid-template-columns: 1fr;
  }
  .seccao--foto-esquerda .seccao__foto {
    order: 0;
  }
  .seccao__lista {
    grid-template-columns: 1fr;
  }
  .passos {
    --colunas: 1;
  }
  .contagem {
    --colunas: 1;
  }
  .contagem__item + .contagem__item {
    border-left: 0;
    border-top: 1px solid var(--color-line);
  }
}

@media (max-width: 620px) {
  .fotos {
    --colunas: 1;
  }
  .fotos__peca {
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pergunta__sinal::before,
  .pergunta__sinal::after,
  .passo {
    transition: none;
  }
}