html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.frame {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  position: relative;
  width: 100%;
  overflow-x: clip;
  background-color: #02090d; /* Pinta as laterais que sobram nos monitores grandes */
}

.frame .portflio-cyber-de {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  background-color: #02090d;
  max-width: 1440px;
  margin: 0 auto;
  
  /* MUDANÇA AQUI: Troque 'clip' por 'visible' para permitir que a foto vaze para as bordas de monitores grandes */
  overflow: visible; 
}

.frame .abertura {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 650px; 
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #02090d;
  
  /* A MÁGICA: Corta a parte da foto que tenta invadir a próxima secção */
  overflow: hidden; 
  
  scroll-snap-align: start; 
}

.frame .retrato-principal-de {
  position: absolute;
  top: 0;
  
  /* MUDANÇAS AQUI: Cálculo que empurra a foto para a direita infinita do monitor e garante que ela não fique pequena */
  right: calc(50% - 50vw); 
  width: max(750px, 50vw); 
  max-width: none; 
  
  height: 115%;
  object-fit: cover;
  object-position: 0% center; 
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40%);
  mask-image: linear-gradient(to right, transparent 0%, black 40%);
}

.frame .vu-cinematogrfico {
  position: absolute;
  top: 0;
  
  /* MUDANÇAS AQUI: Força o véu escuro a ter a largura exata da tela (100vw) e a alinhar-se à borda esquerda do monitor */
  left: calc(50% - 50vw);
  width: 100vw;
  
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(2, 9, 13, 0.95) 0%, 
    rgba(2, 9, 13, 0.4) 45%, 
    rgba(2, 9, 13, 0) 100%  
  );
  z-index: 1;
  pointer-events: none; 
}

.frame .gradiente-inferior {
  position: absolute;
  bottom: 0; 
  
  /* MUDANÇAS AQUI: Estica a névoa inferior para a largura total da tela, igual ao véu cinematográfico */
  left: calc(50% - 50vw);
  width: 100vw;
  
  height: 300px; 
  background: linear-gradient(
    to top, 
    rgba(2, 9, 13, 1) 0%, 
    rgba(2, 9, 13, 0) 100% 
  );
  z-index: 1; 
}

.frame .navegao {
  display: flex;
  height: 88px;
  align-items: center;
  justify-content: space-between;
  padding: 0px 96px;
  position: relative;
  align-self: stretch;
  width: 100%;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #24414a;
  z-index: 10; /* ISSO AQUI traz o menu para a frente de tudo */
}

.frame .assinatura {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.frame .circle-x {
  position: relative;
  width: 32px;
  height: 32px;
}

.frame .vector {
  position: absolute;
  width: 93.23%;
  height: 93.23%;
  top: 6.77%;
  left: 6.77%;
}

.frame .nome {
  position: relative;
  width: fit-content;
  font-family: "Roboto Condensed-Bold", Helvetica;
  font-weight: 700;
  color: #ddecf0;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.frame .links {
  display: inline-flex;
  align-items: flex-start;
  gap: 34px;
  position: relative;
  flex: 0 0 auto;
  
  /* Remove margens, paddings e as bolinhas (bullets) da lista padrão do HTML */
  list-style: none;
  margin: 0;
  padding: 0;
}

.frame .links li {
  margin: 0;
  padding: 0;
  display: block; /* Mantém o comportamento de bloco para o link dentro dele */
}

.frame .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Roboto Mono-Regular", Helvetica;
  font-weight: 400;
  color: #65fff0;
  font-size: 12px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .status {
  position: relative;
  width: fit-content;
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  color: #65fff0; /* Voltamos pro ciano original */
  font-size: 11px;
  letter-spacing: 0.5px;
  
  /* Criando a etiqueta com fundo escuro */
  background-color: rgba(2, 9, 13, 0.75); 
  padding: 6px 14px;
  border-radius: 20px; /* Deixa as bordas arredondadas (formato pílula) */
  border: 1px solid rgba(101, 255, 240, 0.15); /* Borda bem sutil */
  backdrop-filter: blur(4px); /* Borra o fundo claro da foto atrás dele */
  z-index: 11;
}

.frame .contedo-do-hero {
  display: flex;
  flex-direction: column;
  width: 650px;
  max-width: 90%;
  align-items: flex-start;
  position: absolute;
  
  top: 22vh !important; /* Ajustado de 14vh para 22vh para descolar do menu */
  
  left: 80px;
  z-index: 10;
}

.frame .microcopy {
  position: relative;
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  color: #65fff0;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px !important; /* Dá espaço para o título respirar */
}

.frame .t-tulo {
  position: relative;
  align-self: stretch;
  font-family: "Space Grotesk", Helvetica, sans-serif !important;
  font-weight: 700 !important;
  font-size: 60px !important; 
  letter-spacing: -1.5px !important; 
  line-height: 1.1 !important; 
  
  /* Remove o degradê antigo e volta à cor brilhante original */
  background: none !important;
  -webkit-text-fill-color: unset !important;
  color: #e9fbf8 !important; 
  
  text-shadow: 0px 4px 16px rgba(0, 0, 0, 0.6) !important;
  margin-bottom: 24px !important; /* Espaço generoso antes do parágrafo */
}

.frame .descri-o {
  width: 545px;
  color: #82a4a8;
  font-size: 18px;
  line-height: 1.5;
  font-family: "Inter", Helvetica, sans-serif;
  font-weight: 400;
  margin-bottom: 32px !important; /* Empurra os botões bem para baixo */
}

.frame .ao,
.frame .div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content !important; /* Conserta o desktop: o botão terá apenas o tamanho do texto */
  padding: 16px 32px !important; /* Dá um respiro lateral elegante para o botão */
  box-sizing: border-box;
  border-radius: 14px;
  min-height: 52px;
}

.frame .contedo-do-hero .ao,
.frame .contedo-do-hero .div {
  background: rgba(101, 255, 240, 0.04) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.frame .contedo-do-hero .ao:hover,
.frame .contedo-do-hero .div:hover {
  background-color: #65fff0 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px rgba(101, 255, 240, 0.25) !important;
}

.frame .ao:hover,
.frame .div:hover,
.frame .ao:focus-visible,
.frame .div:focus-visible {
  background-color: #65fff0 !important; /* Preenche com ciano */
  box-shadow: 0px 0px 20px rgba(101, 255, 240, 0.4) !important; /* Brilho externo */
}

/* --- 3. FIXA OS TEXTOS PARA NÃO QUEBRAREM LINHA --- */
.frame .r-tulo,
.frame .r-tulo-2,
.frame .r-tulo-3 {
  position: relative !important;
  width: auto !important;
  white-space: nowrap !important; /* Impede que "ENVIAR EMAIL" fique em duas linhas */
  font-family: "Roboto Mono", Helvetica, monospace !important;
  font-weight: 700 !important;
  color: #65fff0 !important; /* Cor ciano padrão */
  font-size: 13px !important;
  letter-spacing: 0.1px !important;
  line-height: normal !important;
  transition: color 0.3s ease !important;
  margin: 0 !important;
}

/* Garante que o texto (incluindo o do GitHub) fique escuro quando o botão acender */
.frame .ao:hover .r-tulo,
.frame .div:hover .r-tulo-2,
.frame .div:hover .r-tulo-3,
.frame .ao:focus-visible .r-tulo,
.frame .div:focus-visible .r-tulo-2,
.frame .div:focus-visible .r-tulo-3 {
  color: #02090d !important; 
}

/* --- 4. ORGANIZAÇÃO DOS GRUPOS DE BOTÕES --- */
/* Regra geral: botões lado a lado, quebrando linha apenas se faltar espaço */
.frame .aes {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important; 
  align-items: center !important;
  gap: 16px !important; 
  position: relative !important;
  width: 100% !important;
  margin-top: 0 !important;
}

/* Regra específica para o Contato: força uma grade de 2 em 2 empurrando os últimos para baixo */
/* --- 1. Grelha Perfeita para os Botões de Contato --- */
.frame .convite .aes {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 420px !important;
  margin-top: 24px !important;
}

/* --- 2. Design Premium para os Botões --- */
.frame .convite .ao,
.frame .convite .div {
  width: 100% !important;
  height: 56px !important;
  background: rgba(101, 255, 240, 0.04) !important;
  border: 1px solid rgba(101, 255, 240, 0.25) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(4px) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* --- 3. Interação Tátil (Hover) --- */
.frame .convite .ao:hover,
.frame .convite .div:hover {
  background-color: #65fff0 !important;
  border-color: #65fff0 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 24px rgba(101, 255, 240, 0.25) !important;
}

/* --- 2. Animação de Scanner na Caixa Biométrica --- */
@keyframes cyberPulse {
  0% { box-shadow: 0 0 0 0 rgba(101, 255, 240, 0.2); }
  70% { box-shadow: 0 0 0 15px rgba(101, 255, 240, 0); }
  100% { box-shadow: 0 0 0 0 rgba(101, 255, 240, 0); }
}

.frame .leitura-biomtrica {
  display: flex;
  flex-direction: column;
  width: auto;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 16px;
  position: absolute;
  bottom: 40px; /* Aumentado de 20px para 40px para alinhar com a esquerda */
  right: 35px; /* Mantém afastado do seu rosto */
  background-color: rgba(4, 17, 23, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top-width: 2px;
  border-top-style: solid;
  border-left-width: 2px;
  border-left-style: solid;
  border-color: rgba(101, 255, 240, 0.4);
  border-left-color: #65fff0 !important;
  z-index: 10;
  animation: cyberPulse 3s infinite !important;
}

.frame .leitura {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  color: rgba(101, 255, 240, 0.85); /* Texto levemente suavizado */
  font-size: 10px; /* Fonte um pouco menor para reforçar que é um detalhe */
  letter-spacing: 1px;
  line-height: 20px;
  white-space: nowrap;
}

/* --- 3. Movimento de Flutuação no SCROLL TO EXPLORE --- */
@keyframes bounceScroll {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.frame .ndice-de-rolagem {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: absolute;
  top: auto; 
  bottom: 30px; /* Aumentado de 20px para 40px para não encostar nos botões de cima */
  left: 80px;
  z-index: 10;
  text-decoration: none;
  animation: bounceScroll 2.5s infinite ease-in-out !important;
}

/* Criando a linha com CSS puro */
.frame .ndice-de-rolagem::before {
  content: "";
  display: block;
  width: 68px;
  height: 2px;
  background-color: #65fff0; /* A mesma cor do botão */
}

/* Escondendo a imagem antiga da linha, já que estamos usando CSS agora */
.frame .linha {
  display: none;
}

/* Ajustando a cor e a fonte da nota */
.frame .nota {
  position: relative;
  width: fit-content;
  color: #82a4a8; /* Esta cor estava escura no fundo preto. Se quiser mais claro, troque para #ddecf0 */
  font-size: 10px;
  letter-spacing: 0.14px;
  font-family: "Roboto Mono-Regular", Helvetica, sans-serif;
  text-transform: uppercase;
}

.frame .manifesto {
  display: flex;
  flex-direction: column;
  width: 100% !important;
  max-width: 540px !important; /* Largura perfeita para o título quebrar de forma editorial */
  align-items: flex-start;
  gap: 24px !important;
  flex-shrink: 0 !important; /* Impede o esmagamento */
}

.frame .etiqueta {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Roboto Mono-Regular", Helvetica;
  font-weight: 400;
  color: #65fff0;
  font-size: 12px;
  letter-spacing: 0.19px;
  line-height: normal;
}

.frame .p {
  font-family: "Space Grotesk", Helvetica, sans-serif !important;
  font-weight: 700 !important;
  color: #e9fbf8 !important; /* Restaura o branco brilhante */
  font-size: 52px !important; 
  line-height: 1.1 !important;
  letter-spacing: -1px !important;
  white-space: normal !important;
}

.frame .sinal {
  position: relative;
  width: 120px;
  height: 2px;
  background-color: #65fff0;
}

.frame .texto {
  display: flex;
  flex-direction: column;
  width: 100% !important;
  max-width: 560px !important;
  align-items: flex-start;
  gap: 32px !important;
  flex-shrink: 0 !important;
}

.frame .descri-o-2 {
  align-self: stretch;
  margin-top: -1px;
  color: #e9fbf8;
  font-size: 20px;
  line-height: 31px;
  position: relative;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  letter-spacing: 0;
}

.frame .complemento {
  position: relative;
  align-self: stretch;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #82a4a8;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 26.4px;
}

/* =========================================================================
   RESTAURAÇÃO DO DESKTOP - SEGUNDA TELA LADO A LADO E COM ÍMÃ
   ========================================================================= */
.frame .apresentao {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 60px !important;
  padding: 0px 80px !important;
  height: 100vh !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative;
  width: 100%;
  background-color: #07161c;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

.frame .manifesto {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 540px !important;
  gap: 24px !important;
  flex-shrink: 0 !important;
}

.frame .texto {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 560px !important;
  gap: 32px !important;
  flex-shrink: 0 !important;
}

.frame .indicadores {
  display: flex;
  align-items: stretch; /* Faz com que todos os cartões cresçam até à mesma altura máxima */
  gap: 16px; /* Aumenta um pouco o respiro entre os cartões */
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame .indicador {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center; /* Mantém o conteúdo sempre centrado verticalmente */
  gap: 12px; /* Dá mais espaço entre o número e o texto pequeno */
  padding: 24px 20px; /* Aumenta o espaço interno para tornar os cartões mais imponentes */
  position: relative;
  flex: 1 1 0; /* A magia acontece aqui: força todos a terem a mesma largura exata */
  background-color: #0b2028;
  border-radius: 8px; /* Cantos ligeiramente mais arredondados */
  border: 1px solid #173a43;
  transition: all 0.3s ease; /* Prepara o cartão para uma animação suave */
}

/* NOVO: Efeito de embelezamento ao passar o rato (Hover) */
.frame .indicador:hover {
  border-color: #65fff0; /* A borda acende com a cor ciano */
  transform: translateY(-4px); /* O cartão "levanta" ligeiramente */
  box-shadow: 0 8px 24px rgba(101, 255, 240, 0.1); /* Cria um brilho suave por baixo */
}

.frame .valor {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Roboto Mono-Bold", Helvetica;
  font-weight: 700;
  color: #65fff0;
  font-size: 26px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .legenda {
  position: relative;
  align-self: stretch;
  font-family: "Roboto Mono-Regular", Helvetica;
  font-weight: 400;
  color: #82a4a8;
  font-size: 10px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .meus-projetos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center; 
  height: 100vh; /* Forçamos a altura de exatamente 1 tela */
  min-height: auto; 
  scroll-snap-align: start; 
  gap: 32px; /* Reduzido de 54px para dar mais espaço aos cartões */
  padding: 60px 80px; /* Reduzido o padding vertical (topo/baixo) que era de 104px */
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #02090d;
}

.frame .ttulo-da-seo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame .ttulo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.frame .t-tulo-2 {
  position: relative;
  width: fit-content;
  font-family: "Space Grotesk-Bold", Helvetica;
  font-weight: 700;
  color: #e9fbf8;
  font-size: 48px;
  letter-spacing: -0.72px;
  line-height: 50.4px;
  white-space: nowrap;
}

.frame .nota-2 {
  position: relative;
  width: 442px;
  color: #82a4a8;
  font-size: 12px;
  text-align: right;
  letter-spacing: 0;
  line-height: 19.2px;
  font-family: "Roboto Mono-Regular", Helvetica;
  font-weight: 400;
}

/* --- 1. Remove a altura forçada dos cartões de projeto --- */
.frame .div-2,
.frame .minesweeper {
  height: auto !important;
  min-height: auto !important;
  flex: 1 !important;
}

/* --- 2. Organiza o texto e a métrica dentro dos cartões --- */
.frame .contedo,
.frame .contedo-2 {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 24px !important;
}

/* --- 3. Garante que os 3 cartões fiquem com a exata mesma altura entre si --- */
.frame .lista-de-projetos {
  align-items: stretch !important;
}

.frame .lista-de-projetos {
  display: flex;
  align-items: stretch; /* Faz os cards terem a mesma altura */
  gap: 18px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  overflow: visible; /* Mudado de hidden para visible, para evitar cortes */
}

.frame .div-2 {
  display: flex;
  flex-direction: column;
  /* height: 538px;  <-- APAGUE OU COMENTE ESTA LINHA */
  min-height: 500px; /* Adicione um min-height para manter o visual */
  align-items: flex-start;
  position: relative;
  flex: 1; /* Isto faz com que todos os cards dividam o espaço igualmente (33% cada) */
  background-color: #0b2028;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid;
  border-color: #173a43;
} 

/* Regras gerais para as três imagens (tamanho e preenchimento) */
.frame .visual-do-projeto,
.frame .img,
.frame .visual-do-projeto-2 {
  height: 170px;
  position: relative;
  align-self: stretch;
  width: 100%;
  object-fit: cover;
}

/* 1. Primeira imagem (Drone) centralizada no meio */
.frame .visual-do-projeto {
  object-position: center center;
}

/* 2. Segunda (App Vet) e Terceira (Minesweeper) imagem presas no topo para não cortar os títulos */
.frame .img,
.frame .visual-do-projeto-2 {
  object-position: top center;
}

.frame .contedo,
.frame .contedo-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1; 
  align-items: flex-start;
  gap: 12px; /* Reduzido de 16px */
  padding: 20px; /* Reduzido de 26px */
  position: relative;
  align-self: stretch;
  width: 100%;
}

.frame .metadados {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame .tipo {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Roboto Mono-Regular", Helvetica;
  font-weight: 400;
  color: #82a4a8;
  font-size: 10px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .t-tulo-3 {
  position: relative;
  width: fit-content;
  font-family: "Space Grotesk-Bold", Helvetica;
  font-weight: 700;
  color: #e9fbf8;
  font-size: 24px; /* Reduzido de 28px para evitar quebra de linha excessiva */
  letter-spacing: 0;
  line-height: normal;
}

.frame .descri-o-3 {
  position: relative;
  align-self: stretch;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #82a4a8;
  font-size: 14px; /* Reduzido de 15px */
  letter-spacing: 0;
  line-height: 1.4; /* Ajustado para melhor fluidez */
}

.frame .m-trica {
  position: relative;
  width: fit-content;
  font-family: "Roboto Mono-Bold", Helvetica;
  font-weight: 700;
  color: #65fff0;
  font-size: 13px;
  letter-spacing: 0;
  line-height: normal;
}

.frame .minesweeper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  /* height: 538px; <-- Se existir, apague */
  min-height: 500px; /* Adicione um min-height */
  flex: 1; /* O mesmo aqui, força a dividir o espaço igualmente */
  background-color: #0b2028;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid;
  border-color: #173a43;
}

.frame .ttulo-da-seo-2 {
  display: flex;
  width: 100%; /* Mudado de 1254px para 100% para se adaptar ao ecrã */
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  flex: 0 0 auto;
}

.frame .nota-3 {
  position: relative;
  width: 380px;
  font-family: "Roboto Mono-Regular", Helvetica;
  font-weight: 400;
  color: #82a4a8;
  font-size: 12px;
  text-align: right;
  letter-spacing: 0;
  line-height: 19.2px;
}

/* 1. Ajuste a tela para caber perfeitamente na janela e parar de pular */
.frame .competncias {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center; 
  height: 100vh; /* Crava a altura em 1 tela */
  min-height: auto;
  scroll-snap-align: start; 
  gap: 32px; /* Diminui o espaço entre o título e as caixas */
  padding: 60px 80px; /* Reduz o espaçamento no topo e na base */
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #07161c;
}

.frame .grade-de-competncias {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 1fr !important; /* A MÁGICA: Força TODAS as linhas a terem a mesma altura máxima */
  gap: 24px !important; 
  align-items: stretch !important; 
  position: relative !important;
  width: 100% !important;
}

.frame .competncia {
  display: flex !important;
  flex-direction: column !important;
  width: auto !important; /* O Grid assume o controlo da largura */
  height: 100% !important; /* Preenche a célula do Grid por completo */
  align-items: flex-start !important;
  justify-content: center !important; 
  gap: 16px !important; 
  padding: 32px 28px !important; /* Respiro interno ampliado para elegância */
  position: relative !important;
  
  /* Fundo em degradê subtil para dar profundidade */
  background: linear-gradient(145deg, rgba(11, 32, 40, 0.9) 0%, rgba(7, 22, 28, 0.9) 100%) !important;
  backdrop-filter: blur(4px) !important; /* Suave desfoque no fundo */
  
  border-radius: 8px !important;
  border: 1px solid #173a43 !important;
  border-top: 2px solid #173a43 !important; /* Detalhe estrutural no topo do cartão */
  
  /* Animação com um efeito elástico suave */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; 
}

.frame .competncia:hover {
  border-color: #65fff0 !important;
  border-top: 2px solid #65fff0 !important; /* O topo acende com mais intensidade */
  transform: translateY(-6px) !important; /* O cartão levanta em direção ao utilizador */
  
  /* Adiciona um brilho externo e um leve reflexo interno */
  box-shadow: 
    0 12px 28px rgba(101, 255, 240, 0.15), 
    inset 0 0 12px rgba(101, 255, 240, 0.05) !important; 
}

.frame .t-tulo-4 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Roboto Mono-Bold", Helvetica;
  font-weight: 700;
  color: #65fff0;
  font-size: 13px;
  letter-spacing: 0.13px;
  line-height: normal;
}

.frame .tecnologias {
  position: relative;
  align-self: stretch;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #82a4a8;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 22.5px;
}

/* =========================================================================
   FIX DEFINITIVO: EXPERIÊNCIA COMPACTA (100VH + 1 LINHA POR MARCO)
   ========================================================================= */

.frame .experncia-e {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  height: 100vh !important;
  max-height: 100vh !important;
  padding: 24px 80px !important;
  gap: 16px !important;
  background-color: #02090d !important;
  scroll-snap-align: start !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.frame .experncia-e .t-tulo-2 {
  font-size: 36px !important;
  line-height: 1.1 !important;
}

.frame .processo {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 16px !important;
  width: 100% !important;
}

.frame .etapa {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  flex: 1 !important;
  padding: 10px 14px !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  border-radius: 6px !important;
  border: 1px solid #173a43 !important;
  background-color: transparent !important;
}

.frame .t-tulo-5 {
  font-family: "Space Grotesk", Helvetica, sans-serif !important;
  font-weight: 700 !important;
  color: #e9fbf8 !important; /* Branco gelo brilhante */
  font-size: 18px !important;
  margin: 0 !important;
}

.frame .descri-o-4 {
  font-family: "Inter", Helvetica, sans-serif !important;
  font-weight: 400 !important;
  color: #82a4a8 !important; /* Cinza azulado clássico do seu tema */
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.frame .experincia {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 0 !important;
}

.frame .marco-profissional {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  padding: 8px 0 !important;
  width: 100% !important;
  border-top: 1px solid #173a43 !important;
}

.frame .per-odo {
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 !important;
  font-family: "Roboto Mono", monospace !important;
  color: #65fff0 !important;
  font-size: 11px !important;
}

.frame .cargo,
.frame .cargo-2 {
  width: 310px !important;
  min-width: 310px !important;
  max-width: 310px !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 700 !important;
  color: #e9fbf8 !important;
  font-size: 15px !important;
  white-space: normal !important;
}

.frame .resumo,
.frame .resumo-2 {
  flex: 1 !important;
  display: block !important;
  margin: 0 !important;
  font-family: "Inter", sans-serif !important;
  color: #82a4a8 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

.frame .terminal-e-contato {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between; 
  height: 100vh; /* Crava exatamente em 1 tela */
  min-height: auto;
  scroll-snap-align: start; 
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #07161c;
  overflow: hidden; /* Garante que nada vai vazar dessa tela */
}

.frame .contato {
  display: flex;
  align-items: center; 
  gap: 60px; 
  /* Reduz o preenchimento de topo/base para o conteúdo não empurrar o rodapé */
  padding: 20px 80px !important; 
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 1; 
}

.frame .convite {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.frame .t-tulo-6 {
  position: relative;
  align-self: stretch;
  font-family: "Space Grotesk-Bold", Helvetica;
  font-weight: 700;
  color: #e9fbf8;
  font-size: 48px;
  letter-spacing: 0;
  line-height: 50.9px;
}

.frame .image {
  position: relative;
  width: 24px;
  height: 24px;
  aspect-ratio: 1;
  object-fit: cover;
}

.frame .r-tulo-3 {
  width: 51px;
  position: relative;
  font-family: "Roboto Mono-Bold", Helvetica;
  font-weight: 700;
  color: #65fff0;
  font-size: 13px;
  letter-spacing: 0.1px;
  line-height: normal;
}

.frame .terminal {
  display: flex;
  flex-direction: column;
  width: 520px;
  align-items: flex-start;
  position: relative;
  background-color: #02090d;
  border-radius: 12px;
  overflow: hidden;
  
  /* Ajuste leve na cor da borda para combinar com o pulso */
  border: 1px solid rgba(101, 255, 240, 0.4) !important; 
  
  /* Adiciona a animação de pulso idêntica à da leitura biométrica */
  animation: cyberPulse 3s infinite !important;
}

.frame .barra-do-terminal {
  display: flex;
  align-items: center; 
  justify-content: space-between;
  padding: 12px 16px; /* Tamanho confortável */
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #0b2028;
  border-bottom: 1px solid #173a43; 
}

/* Oculta o falso cursor da barra de título do terminal */
.frame .indicador-2 {
  display: none !important;
}

/* 3. Estilizar os botões de controlo (— □ ×) para terem o espaçamento correto */
.frame .text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Roboto Mono-Regular", Helvetica;
  font-weight: 400;
  color: #82a4a8;
  font-size: 13px;
  letter-spacing: 16px; /* Afasta os símbolos para parecerem botões individuais */
  margin-right: -16px; /* Compensa o espaçamento extra à direita do '×' */
  line-height: normal;
  cursor: pointer;
  transition: color 0.2s ease;
}

.frame .estado .text-wrapper-2 {
  letter-spacing: 0 !important; 
}

.frame .barra-do-terminal > .text-wrapper-2 {
  letter-spacing: 10px !important; 
  margin-right: -10px; 
  
  font-family: Arial, sans-serif !important; /* A MÁGICA: Muda a fonte apenas para estes 3 símbolos */
  font-size: 16px !important; /* Tamanho ligeiramente maior para compensar a Arial */
  font-weight: 400 !important; 
  transform: translateY(-2px) !important; /* Sobe um bocadinho para centralizar perfeitamente */
  
  cursor: pointer;
  color: #82a4a8;
  transition: color 0.2s ease;
}

.frame .barra-do-terminal > .text-wrapper-2:hover {
  color: #e9fbf8;
}

.frame .corpo-do-terminal {
  display: flex;
  flex-direction: column;
  height: 308px;
  align-items: flex-start;
  padding: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.frame .sess-o {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Roboto Mono-Regular", Helvetica;
  font-weight: 400;
  color: #65fff0;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 22.8px;
}

/* =========================================================================
   RESTAURAÇÃO DO RODAPÉ (DESKTOP) - LADO A LADO
   ========================================================================= */
.frame .rodap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 80px !important;
  min-height: 80px !important;
  padding: 0px 80px !important;
  width: 100% !important;
  background-color: #02090d !important;
  border-top: 1px solid #173a43 !important;
}

.frame .marca {
  text-align: left !important;
  font-family: "Roboto Mono-Bold", Helvetica, sans-serif !important;
  font-weight: 700 !important;
  color: #e9fbf8 !important;
  font-size: 14px !important;
}

.frame .nota-4 {
  text-align: right !important;
  color: #82a4a8 !important;
  font-family: "Roboto Mono-Regular", Helvetica, sans-serif !important;
  font-size: 10px !important;
  white-space: nowrap !important;
  margin-right: 180px !important; /* Empurra a frase para a esquerda, fugindo do logo do Netlify */
}

.frame .nota-5 {
  position: absolute !important;
  bottom: 96px !important; 
  right: 80px !important;  
  text-align: right !important;
  width: auto !important;
  color: #8fa8b0 !important;
  font-family: "Roboto Mono-Regular", Helvetica, sans-serif !important;
  font-size: 13px !important;
}

.frame .span {
  font-family: "Roboto Mono-Regular", Helvetica;
  font-weight: 400;
  color: #8fa8b0;
  font-size: 13px;
  letter-spacing: 0;
}

/* Força a hiperligação a herdar a cor correta e a fonte */
.frame .nota-5 a, 
.frame .text-wrapper-3 {
  color: #8fa8b0 !important;
  font-family: "Roboto Mono-Regular", Helvetica, sans-serif !important;
  text-decoration: underline !important;
}

/* Original style.css is preserved above this accessibility and interaction layer. */

.frame a {
  color: inherit;
}

.frame a:focus-visible {
  outline: 2px solid #65fff0;
  outline-offset: 4px;
  border-radius: 3px;
}

.frame .retrato-principal-de,
.frame .vector,
.frame .linha,
.frame .image {
  display: block;
}

.frame .links .text-wrapper {
  position: relative;
  width: fit-content;
  padding: 8px 4px;
  
  /* Troca a fonte básica por uma mais imponente e tecnológica */
  font-family: "Space Grotesk", Helvetica, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important; /* Letras mais espaçadas = aspeto premium */
  text-transform: uppercase !important;
  
  /* Cor mais suave (branco gelo) em vez de branco puro chapado */
  color: #ddecf0 !important; 
  
  transition: all 0.3s ease;
  text-decoration: none;
}

.frame .links .text-wrapper:hover,
.frame .links .text-wrapper:focus-visible,
.frame .text-wrapper-3:hover,
.frame .text-wrapper-3:focus-visible {
  color: #e9fbf8;
}

/* =========================================================================
   EFEITO HOVER PROFISSIONAL DO MENU (DESKTOP)
   ========================================================================= */
.frame .links .text-wrapper {
  transition: all 0.3s ease !important;
}

.frame .links .text-wrapper:hover,
.frame .links .text-wrapper:focus-visible {
  color: #65fff0 !important;
  text-shadow: 0 0 10px rgba(101, 255, 240, 0.5) !important;
  transform: translateY(-2px) !important;
}

.frame .text-wrapper-3:hover,
.frame .text-wrapper-3:focus-visible {
  color: #65fff0 !important;
}

/* =========================================================================
   SUBLINHADO ANIMADO (CRESCE E SOME NO HOVER)
   ========================================================================= */
.frame .links .text-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #65fff0;
  transition: width 0.3s ease-in-out;
}

.frame .links .text-wrapper:hover::after,
.frame .links .text-wrapper:focus-visible::after {
  width: 100%;
}

/* =========================================================================
   EFEITO HOVER NOS CARTÕES DE PROJETOS (DRONE, CLÍNICA, MINESWEEPER)
   ========================================================================= */
.frame .div-2,
.frame .minesweeper {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  cursor: pointer !important;
}

.frame .div-2:hover,
.frame .minesweeper:hover {
  border-color: #65fff0 !important;
  transform: translateY(-8px) !important;
  box-shadow: 0 16px 32px rgba(101, 255, 240, 0.12) !important;
}

.frame .div-2:hover .visual-do-projeto,
.frame .div-2:hover .img,
.frame .minesweeper:hover .visual-do-projeto-2 {
  transform: scale(1.02);
  transition: transform 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =========================================================================
   RESTAURAÇÃO DO TEXTO DE CONTATO (DESKTOP)
   ========================================================================= */
.frame .descri-o-5 {
  font-family: "Inter-Regular", "Inter", Helvetica, Arial, sans-serif !important;
  color: #82a4a8 !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  width: 100% !important;
  max-width: 560px !important;
  white-space: normal !important;
}

/* =========================================================================
   RESTAURAÇÃO DA LINHA DO TEMPO (DESKTOP) - LADO A LADO
   ========================================================================= */
.frame .marco-profissional {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 30px !important;
  padding: 16px 0px !important;
  width: 100% !important;
}

.frame .per-odo {
  width: 180px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.frame .cargo,
.frame .cargo-2 {
  width: 390px !important;
  flex-shrink: 0 !important;
  display: block !important;
  white-space: normal !important;
}

.frame .resumo,
.frame .resumo-2 {
  flex: 1 !important;
  width: auto !important;
  display: block !important;
}

/* =========================================================================
   CORREÇÃO DA LINHA DO TEMPO DE EXPERIÊNCIA (MOBILE)
   ========================================================================= */
.frame .marco-profissional {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 24px 0 !important;
}

.frame .resumo,
.frame .resumo-2 {
  width: 100% !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* =========================================================================
   RESPONSIVIDADE: RESET ABSOLUTO MOBILE (INCLUINDO FIXES DE TEXTO E TOPO)
   ========================================================================= */
@media (max-width: 768px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
    background-color: #02090d !important;
    margin: 0;
    padding: 0;
  }

  .frame,
  .frame .portflio-cyber-de {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

  /* 1. ESCONDE OS LINKS DO DESKTOP PARA NÃO QUEBRAR A TELA */
  .frame .links,
  .frame .status,
  .frame .leitura-biomtrica,
  .frame .ndice-de-rolagem,
  .frame .vu-cinematogrfico,
  .frame .gradiente-inferior {
    display: none !important;
  }

  /* 2. CORRIGE O ESPAÇO GIGANTE NO TOPO DA NAVEGAÇÃO */
  .frame .navegao {
    padding: 16px 20px !important;
    margin-bottom: 0 !important;
    height: auto !important;
    border-bottom: none !important;
  }

  .frame .circle-x,
  .frame .vector {
    width: 22px;
    height: 22px;
  }

  .frame .nome {
    font-size: 16px;
    white-space: nowrap;
  }

  /* 3. PUXA O TEXTO "SISTEMAS/DADOS" LÁ PARA CIMA E ALINHA NA ESQUERDA */
  .frame .contedo-do-hero {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    top: 0 !important; 
    left: 0 !important; /* <--- ESTA É A MÁGICA QUE RESOLVE O RECUO! */
    margin-top: 24px !important;
    padding: 0 20px !important;
    transform: none !important;
  }

  .frame .microcopy {
    margin: 0 0 12px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  /* 4. IMPEDE O TEXTO DE CORTAR OU FICAR HIFENIZADO ("SIS-TEMAS") */
  .frame .t-tulo,
  .frame .p,
  .frame .t-tulo-2,
  .frame .t-tulo-3,
  .frame .t-tulo-4,
  .frame .t-tulo-5,
  .frame .t-tulo-6 {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 38px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
    margin: 0 0 16px;
    box-sizing: border-box !important;
  }

  .frame .descri-o,
  .frame .descri-o-2,
  .frame .descri-o-3,
  .frame .descri-o-4,
  .frame .complemento,
  .frame .nota-2,
  .frame .nota-3,
  .frame .cargo,
  .frame .cargo-2,
  .frame .resumo,
  .frame .resumo-2,
  .frame .per-odo {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 16px;
    box-sizing: border-box !important;
  }

  /* 5. VOLTA A EMPILHAR OS BOTÕES E COLUNAS PARA O MOBILE */
  .frame .aes,
  .frame .indicadores,
  .frame .lista-de-projetos,
  .frame .grade-de-competncias,
  .frame .processo {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .frame .ao,
  .frame .div {
    width: 100% !important;
    min-height: 52px;
  }

  .frame .ao span,
  .frame .div span,
  .frame .r-tulo,
  .frame .r-tulo-2,
  .frame .r-tulo-3 {
    display: inline-block;
    width: auto;
    min-width: 0;
    margin: 0;
    white-space: normal;
    text-align: center;
  }

  /* 6. GARANTE MARGENS LATERAIS EM TODAS AS TELAS */
  .frame .abertura,
  .frame .apresentao,
  .frame .meus-projetos,
  .frame .competncias,
  .frame .experncia-e,
  .frame .terminal-e-contato {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
    padding: 40px 20px !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  .frame .abertura {
    padding-top: 0 !important;
  }

  /* Suaviza a foto de fundo para facilitar leitura */
  .frame .retrato-principal-de {
    right: -18%;
    width: 150%;
    opacity: 0.15 !important;
  }
  
  /* Reset geral de caixas para não vazarem */
  .frame .manifesto,
  .frame .texto,
  .frame .ttulo-da-seo,
  .frame .ttulo-da-seo-2,
  .frame .convite,
  .frame .indicador,
  .frame .div-2,
  .frame .minesweeper,
  .frame .competncia,
  .frame .etapa {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .frame .div-2,
  .frame .minesweeper,
  .frame .competncia,
  .frame .etapa,
  .frame .indicador {
    padding: 20px !important;
    border-radius: 12px !important;
  }
  
  .frame .contedo,
  .frame .contedo-2 {
    padding: 16px !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .frame .visual-do-projeto,
  .frame .img,
  .frame .visual-do-projeto-2 {
    height: 170px !important;
  }
  
  .frame .contato {
    padding: 18px 0 0 !important;
    gap: 20px;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* =========================================================================
     CORREÇÃO DEFINITIVA DA TELA DE PERFIL (MOBILE)
     ========================================================================= */
  .frame .apresentao {
    flex-direction: column !important;
    padding: 60px 20px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .frame .apresentao * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .frame .manifesto,
  .frame .texto,
  .frame .indicadores {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 1 !important;
  }

  .frame .p {
    font-size: 32px !important;
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .frame .descri-o-2,
  .frame .complemento {
    white-space: normal !important;
  }

  /* =========================================================================
     CORREÇÃO DA TELA DE PROJETOS (MOBILE)
     ========================================================================= */
  .frame .meus-projetos {
    flex-direction: column !important;
    padding: 60px 20px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .frame .meus-projetos * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .frame .lista-de-projetos {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
  }

  .frame .div-2,
  .frame .minesweeper {
    width: 100% !important;
    margin: 0 !important;
    flex-shrink: 1 !important;
  }

  .frame .t-tulo-2,
  .frame .t-tulo-3 {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* =========================================================================
     CORREÇÃO DA TELA DE COMPETÊNCIAS (MOBILE)
     ========================================================================= */
  .frame .competncias {
    padding: 60px 20px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .frame .competncias * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .frame .grade-de-competncias {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 16px !important;
  }

  .frame .competncia {
    width: 100% !important;
    padding: 24px 20px !important;
    margin: 0 !important;
  }

  .frame .tecnologias {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.5 !important;
  }

  /* =========================================================================
     CORREÇÃO DEFINITIVA: CONTATO E TERMINAL (MOBILE)
     ========================================================================= */

  /* 1. Força a secção inteira a não ultrapassar o ecrã */
  .frame .terminal-e-contato {
    padding: 60px 20px 40px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 100vh !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* 2. A MÁGICA: Proíbe QUALQUER texto, botão ou caixa de vazar da tela */
  .frame .terminal-e-contato * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 3. Empilha o texto de convite e o terminal */
  .frame .contato {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 32px !important;
  }

  .frame .convite {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 4. Força a quebra de linha no título e no texto descritivo */
  .frame .t-tulo-6 {
    font-size: 32px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  .frame .descri-o-5,
  .frame .descri-o-5 p,
  .frame .descri-o-5 span {
    font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    color: #8a9a9d !important; /* Cor cinza claro */
    font-size: 18px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    width: 100% !important;
    max-width: 560px !important;
    white-space: normal !important;
  }

  /* 5. Ajusta o Terminal para ficar flexível e sem espaços bizarros */
  .frame .terminal {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .frame .corpo-do-terminal {
    height: auto !important;
    padding: 20px !important;
  }

  .frame .sess-o {
    white-space: normal !important; 
    word-break: normal !important; /* Desliga quebras no meio das palavras */
    overflow-wrap: break-word !important; /* Quebra APENAS o e-mail se não couber */
    line-height: 1.5 !important; /* Altura de linha clássica de terminal */
    text-align: left !important;
  }

  .frame .experncia-e {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  /* =========================================================================
     CORREÇÃO FINAL ABSOLUTA: RODAPÉ E CRÉDITOS (MOBILE)
     ========================================================================= */
  .frame .rodap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    padding: 32px 20px 0px !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .frame .marca {
    width: 100% !important;
    text-align: center !important;
    font-size: 16px !important;
  }

  .frame .nota-4 {
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    margin: 0 !important;
    line-height: 1.5 !important;
  }

  .frame .nota-5 {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 16px auto 40px auto !important;
    padding: 0 !important;
  }
}