/* =========================================================
   SEÇÃO SOBRE
   Textos à esquerda. À direita ficam a fotografia e o "PD" —
   que NÃO existem aqui: são os mesmos elementos da seção inicial,
   levados até esta posição pelo scroll (js/secao-sobre.js).
   Medidas proporcionais à imagem de referência (1116 × 599).
   ========================================================= */

.secao-sobre {
  position: relative;
  z-index: 1;
}

.palco-sobre {
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
}

/* ---------- Fundo e iluminação ---------- */

.fundo-sobre {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    /* canto superior esquerdo: continuação do brilho inferior esquerdo da seção inicial */
    radial-gradient(ellipse var(--brilho-emenda-largura) var(--brilho-emenda-altura) at 0% 0%, var(--brilho-emenda-cores)),
    /* canto inferior direito: continua no canto superior direito da seção Trabalhos */
    radial-gradient(ellipse var(--brilho-emenda-largura) var(--brilho-emenda-altura) at 100% 100%, var(--brilho-emenda-cores)),
    var(--preto-profundo);
}

/* brilho vermelho atrás da fotografia (posição final dela) */
.luz-sobre {
  position: absolute;
  z-index: -1;
  right: 0;
  top: 8%;
  width: 52vw;
  height: 84%;
  background: radial-gradient(ellipse 50% 50% at 62% 50%, rgba(130, 0, 0, 0.32), rgba(112, 0, 0, 0.08) 55%, transparent 74%);
  pointer-events: none;
}

/* ---------- Textos ---------- */

.conteudo-sobre {
  position: absolute;
  z-index: 2;
  /* um pouco mais para dentro: composição mais próxima do centro */
  left: calc(var(--margem-lateral) + 4vw);
  top: 50%;
  /* centralizado na vertical */
  translate: 0 -50%;
  width: min(40vw, 760px);

  /*
   * Escalas do conteúdo (1 = tamanho da imagem de referência).
   * Diminua para deixar menor; todos os tamanhos e espaços acompanham.
   */
  --escala-titulos: 0.74; /* rótulo SOBRE MIM e nome Pedro Martins */
  --escala-texto: 0.84;   /* subtítulo, parágrafos, espaçamentos e botão */
}

.identificacao-sobre {
  display: flex;
  align-items: center;
  gap: calc(clamp(14px, 1.6vw, 26px) * var(--escala-titulos));
  font-size: max(11px, calc(min(0.95vw, 1.8vh) * var(--escala-titulos)));
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.traco-identificacao {
  width: calc(clamp(80px, 13.5vw, 240px) * var(--escala-titulos));
  height: 1px;
  background: linear-gradient(90deg, var(--vermelho), rgba(255, 255, 255, 0.25));
  flex-shrink: 0;
}

.titulo-sobre {
  margin-top: calc(min(0.9vw, 1.7vh) * var(--escala-titulos));
  font-size: calc(min(6.2vw, 11.4vh) * var(--escala-titulos));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #ececec;
}

.titulo-sobre .destaque-vermelho {
  color: var(--vermelho);
}

.subtitulo-sobre {
  margin-top: calc(min(1.2vw, 2.2vh) * var(--escala-texto));
  max-width: 21em;
  font-size: calc(min(1.72vw, 3.15vh) * var(--escala-texto));
  font-weight: 400;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.92);
}

.texto-sobre {
  display: flex;
  flex-direction: column;
  gap: calc(min(1.5vw, 2.8vh) * var(--escala-texto));
  margin-top: calc(min(2.6vw, 4.8vh) * var(--escala-texto));
  max-width: 33em;
}

.texto-sobre p {
  font-size: max(13px, calc(min(1.17vw, 2.15vh) * var(--escala-texto)));
  font-weight: 400;
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.74);
}

.botao-trabalhos {
  margin-top: calc(min(2.6vw, 4.8vh) * var(--escala-texto));
  height: calc(min(3.4vw, 6.4vh) * var(--escala-texto));
  min-height: 40px;
  gap: 0.6em;
  padding-inline: calc(min(1.6vw, 3vh) * var(--escala-texto));
  font-size: max(13px, calc(min(1.22vw, 2.3vh) * var(--escala-texto)));
  background: var(--vermelho);
  color: var(--branco);
}

.seta-botao {
  display: inline-block;
  transition: transform 0.5s var(--curva-expo);
}

.botao-trabalhos:hover {
  background: #e60000;
  transform: scale(1.035);
  box-shadow: 0 10px 34px -8px rgba(255, 0, 0, 0.55);
}

.botao-trabalhos:hover .seta-botao {
  transform: translateX(5px);
}

/* ---------- Blur Reveal: estrutura gerada pelo JS ---------- */

.palavra-desfoque {
  display: inline-block;
  white-space: nowrap;
}

.caractere-desfoque {
  display: inline-block;
}

/* =========================================================
   RESPONSIVIDADE
   ========================================================= */

/* Notebooks e tablets deitados: um pouco mais de largura para os textos */
@media (max-width: 1180px) and (min-width: 901px) {
  .conteudo-sobre {
    left: var(--margem-lateral);
    width: 41vw;
  }
}

/* Tablets em pé e celulares: a cena (foto + PD) fica no topo e os textos abaixo */
@media (max-width: 900px) {
  .palco-sobre {
    --altura-cena: min(112vw, 64svh, 720px);
    height: auto;
    min-height: 0;
    padding: calc(var(--altura-cena) + 84px) var(--margem-lateral) 110px;
  }

  .luz-sobre {
    left: 0;
    right: 0;
    top: 70px;
    width: auto;
    height: var(--altura-cena);
  }

  .conteudo-sobre {
    position: relative;
    left: auto;
    top: auto;
    translate: none;
    width: 100%;
    max-width: 620px;
  }

  .identificacao-sobre {
    font-size: 12px;
  }

  .titulo-sobre {
    font-size: clamp(36px, 11.5vw, 72px);
  }

  .subtitulo-sobre {
    font-size: clamp(17px, 4.6vw, 22px);
  }

  /* parágrafos com respiro: espaço entre eles e entrelinha confortável */
  .texto-sobre {
    gap: clamp(18px, 5vw, 26px);
    margin-top: clamp(26px, 7vw, 36px);
    max-width: 36em;
  }

  .texto-sobre p {
    font-size: clamp(14.5px, 3.9vw, 17px);
    line-height: 1.7;
    letter-spacing: 0.005em;
    color: rgba(255, 255, 255, 0.78);
    text-wrap: pretty;
  }

  .botao-trabalhos {
    margin-top: clamp(32px, 9vw, 44px);
    height: 48px;
    padding-inline: 22px;
    font-size: 15px;
  }
}