@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300;0,400;1,300&display=swap');

/* ===== Temas ===== */
/* Tema escuro (padrão) */
:root {
  --color1: #ece3ff;      /* texto */
  --color-clean: #ece3ff; /* texto claro */
  --color-dark: #6748a4;  /* destaque */
  --color2: #111111;      /* fundo */
  --nav-bg: #000000;      /* fundo do nav (dark) */
  --button-hover-bg: #000000; /* hover em botões (dark) */
  --menuheight: 65px;
}

/* Tema claro */
html[data-theme="light"] {
  --color1: #5a35c8;      /* texto */
  --color-clean: #3e3069; /* texto claro */
  --color-dark: #5a35c8;  /* destaque */
  --color2: #ffffff;      /* fundo */
  --nav-bg: #f5f6fb;      /* fundo do nav (light) */
  --button-hover-bg: #e9e9f4; /* hover em botões (light) */
}

/* ===== Base ===== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background-color: var(--color2);
  font-weight: 100;
}

body, button, select, input, textarea {
  font-family: 'Red Hat Display', sans-serif;
  color: var(--color1);
}

h1 {
  padding-top: 50px;
  font-size: 60px;
  margin: 0;
  color: var(--color-clean);
  letter-spacing: 5px;
  font-weight: 100;
}

h2 { font-size: 24px; font-weight: 100; }

a {
  color: var(--color-clean);
  text-decoration: none;
}
a:hover { color: var(--color-dark); }

/* ===== Controles no nav ===== */
.controls { display: flex; align-items: center; gap: 12px; }

.toggle {
  cursor: pointer;
  border: 1px solid var(--color-clean);
  border-radius: 999px;
  padding: 6px 10px;
  background: transparent;
  color: var(--color-clean);
  font-size: 12px;
}
.toggle svg { width: 16px; height: 16px; display: block; }

.lang-switch { display: flex; align-items: center; gap: 6px; }
.lang-btn {
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-clean);
  color: var(--color-clean);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
}
.lang-btn.active,
.lang-btn[aria-pressed="true"] {
  background: var(--color-clean);
  color: var(--color2);
  border-color: var(--color-clean);
}
.lang-sep { opacity: .6; }

/* ===== Layout das seções ===== */
section#home {
  height: 94vh;
  padding-top: 60px;
  box-sizing: border-box;
}
section:not(#home) {
  height: auto;
  padding-top: 60px;
  box-sizing: border-box;
}

header {
  height: calc(100vh - var(--menuheight));
  display: flex;
  align-items: center;
  padding: 0 50px;
}
header .container {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
header .header-logo {
  max-width: 500px;
  height: auto;
  margin-left: 20px;
}
header .text-content { max-width: 60%; }
header .text-content p { color: var(--color1); }
header .button-header { margin-top: 30px; display: flex; }

/* ===== Navegação ===== */
nav {
  display: flex;
  height: var(--menuheight);
  justify-content: space-between;
  padding: 0 100px;
  position: sticky;
  top: 0;
  background-color: var(--nav-bg);
  z-index: 99;
}
nav img { height: var(--menuheight); }
nav ul {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0 100px;
}

/* ===== Botões ===== */
.button {
  border: 0;
  border-radius: 20px;
  padding: 10px 10px;
  font-weight: bold;
  height: 35px;
}
.button svg { display: block; height: 18px; width: 18px; }
.button span { display: none; }
.button:hover { background-color: var(--button-hover-bg); }
.button:hover svg { display: none; }
.button:hover span { display: block; color: var(--color-clean); font-size: 14px; }

/* ===== Sobre ===== */
#contain { display: flex; padding: 50px; }

.about {
  display: flex;
  flex-direction: column;
  padding: 100px;
  align-items: center;
  justify-content: space-around;
}
.about .container { width: 50%; padding-right: 50px; }
.about .container .social-icons {
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0 30%;
}
.about .image-container {
  width: 50%;
  text-align: center;
  position: relative;
}
.about .image-container img {
  width: 70%;
  height: 100%;
  object-fit: cover;
}
.about .image-container .line {
  width: calc(70% + 50px);
  height: calc(100% + 50px);
  border: 1px solid var(--color-clean);
  position: absolute;
  top: -25px;
  left: calc(50% - 70%/2 - 25px);
}
.about .image-container .line.rot {
  transform: rotate(-3.3deg);
  border-color: var(--color-dark);
}

/* ===== Serviços ===== */
.services { text-align: center; padding-top: 50px; }
.services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: 0 50px 100px;
  max-width: 90%;
  margin: 20px auto;
}
.services .services-container .services-card {
  border: 1px solid var(--color-clean);
  border-radius: 15px;
  margin: 10px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  max-width: 300px;
  box-sizing: border-box;
}
.services .services-container .services-card svg {
  width: 80px;
  height: 80px;
  margin: 30px 0 5px;
  color: var(--color-dark);
}

/* ===== Portfólio ===== */
.portfolio { text-align: center; padding-top: 50px; }
.portfolio-container {
  margin: 20px 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, auto));
  justify-items: center;
}
.card-portfolio {
  border: 1px solid var(--color-clean);
  border-radius: 15px;
  margin: 10px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  min-width: 200px;
  max-width: 300px;
}
/* se já tiver trocado o id por classe, use .btn-hidden */
#btn-hidden { cursor: pointer; }

.skills-container ul {
  display: flex;
  justify-items: center;
  padding: 0;
  color: var(--color-clean);
  margin: 5px;
}
.skills-container li {
  font-size: 11px;
  display: flex;
  border: 1px solid var(--color-clean);
  border-radius: 15px;
  padding: 5px;
  margin: 2px;
}

.card-portfolio .image-container { margin: 25px 0; }
.card-portfolio .image-container img {
  max-width: 100%;
  max-height: 150px;
}

/* ===== Currículo ===== */
.resume { text-align: center; padding: 50px; margin-bottom: 100px; }
.resume .container {
  display: flex;
  max-width: 1200px;
  margin: 50px auto;
}
.resume .container .image-container { width: 50%; }
.resume .container .image-container img {
  width: 50%;
  margin-top: 0;
  min-width: 260px;
}
.resume .container .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
  width: 100%;
}
.resume .container .content .buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 50%;
}
.resume .container .content .resume-info {
  display: grid;
  grid-template-columns: 150px auto;
  grid-gap: 1rem;
  margin-bottom: 50px;
}

/* ===== Rodapé ===== */
footer { height: 100px; }
footer p { font-size: 12px; text-align: center; }

/* ===== Responsividade ===== */
@media (max-width: 1000px) {
  section { height: auto; }
  header .container { width: 100%; padding: 70px; }

  .about { flex-direction: column; }
  .about .container, .about .image-container { width: 100%; }
  .about .container { padding-right: 0; }
  .about .image-container { margin: 50px 0px; }

  .services .services-container {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  .services-card { height: 380px; }

  .resume .container {
    flex-wrap: wrap;
    flex-direction: column;
    margin: 0 auto;
    align-items: center;
  }
  .resume .container .image-container { padding-bottom: 50px; }
}

@media (max-width: 767px) {
  header .container { padding: 10px; flex-direction: column-reverse; }
  header .container img { display: inline; max-height: 300px; margin-bottom: 50px; }

  nav { padding: 0 30px; }
  nav img { display: none; }
  nav ul { padding: 0; justify-content: space-between; }

  #contain { display: flex; flex-direction: column-reverse; }

  .resume .container .image-container { width: 100%; }
  .resume .container .image-container img { min-width: 150px; }
}

@media (max-width: 480px) {
  section { height: auto; }
  header { padding: 0; }
  header .container img { display: inline; max-height: 100px; margin-bottom: 50px; }
  header h1 { font-size: 45px; }

  nav {
    position: fixed;
    bottom: 0;
    top: unset;
    padding: 0 20px;
    width: 100%;
    height: 75px;
  }

  nav .button { height: 40px; font-size: 12px; padding-bottom: 10px; }

  .button:hover span { display: none; }
  .button:hover svg { display: block; color: var(--color2); }

  nav ul { padding: 0; justify-content: space-around; }
  nav ul .button svg { display: block; margin: 0 auto; }
  nav ul .button span { display: none; }

  .about { padding: 40px; }
  .services { padding: 40px; }
  .resume { padding: 40px; }
  .resume .container .content .resume-info { grid-template-columns: auto; }
  .services .services-container .services-card { max-height: 350px; }

  .controls { gap: 8px; }
  .toggle { padding: 6px 8px; }
}