/* =====================
   RESET & BASE
===================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Sora", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  background-color: #000;
  overflow-anchor: none;
}

/* =====================
   TIPOGRAFIA
===================== */
h1 {
  font-size: clamp(48px, 12vw, 156px);
  color: #fff;
  font-weight: 1000;
  text-align: left;
  display: block;
  line-height: 0.9;
}

.name-line {
  display: block;
}

.name-line.accent {
  color: #FFF128;
}

/* =====================
   HEADER
===================== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;
  border-bottom: 8px solid #000;
  font-weight: 1000;
  letter-spacing: 0.08em;
  background-color: #FFF128;
  flex-wrap: wrap;
  gap: 8px;
}

.menu {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* =====================
   TICKER
===================== */
.ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFF128;
  border-top: 8px solid #000;
  border-bottom: 8px solid #000;
  padding: 12px 0;
  overflow: hidden;
}

.ticker-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: ticker 18s linear infinite;
  font-weight: 700;
  font-size: clamp(10px, 1.5vw, 13px);
  letter-spacing: 0.15em;
  color: #000;
}

.ticker-track .sep {
  color: #FF28B7;
}

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =====================
   SECTIONS
===================== */
section {
  min-height: 100vh;
  padding: 80px 40px;
  border-bottom: 8px solid #000;
}

#titulo {
  background-color: #000;
  min-height: 50vh;
  position: relative;
}

#sobre   { background-color: #ff8df7; }
#projetos { background-color: #2969FF; }
#skills  { background-color: #9C7CFF; }
#cv      { background-color: #ff4848; }

/* =====================
   CARDS — BASE
===================== */
.card {
  background: #96D1AA;
  border: 6px solid #000;
  box-shadow: 10px 10px 0 #000;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.head {
  text-align: left;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 900;
  background: #fff;
  padding: 12px;
  color: #000;
  border-bottom: 6px solid #000;
  letter-spacing: 2px;
}

.content {
  padding: 24px 12px;
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 1000;
  display: flex;
  flex-direction: column;
  gap: 16px;
  letter-spacing: 1px;
}

.card img {
  display: block;
  margin: 0 auto;
  filter: contrast(1.2) saturate(1.1);
  border: 4px solid #000;
}

/* =====================
   BOTÃO
===================== */
a {
  align-self: center;
  text-decoration: none;
  background: #29F0FF;
  color: #000000;
  padding: 10px 20px;
  border: 4px solid #000;
  box-shadow: 6px 6px 0 #000;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  display: inline-block;
  font-weight: 900;
  letter-spacing: 1px;
}

a:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #000;
}

a:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 #000;
}

.botoes {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px; 
}

/* =====================
   SEÇÃO SOBRE
===================== */
#sobre {
  position: relative;
  height: auto;
  min-height: 100vh;
  padding-top: 60px;
  padding-bottom: 60px;
}

#sobre .cards {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  position: static;
  min-height: unset;
  flex-wrap: wrap;
}

#sobre .card1 {
  position: static;
  flex: 1;
  min-width: 280px;
  transform: rotate(-2deg);
  background: #7aff87;
  z-index: 1;
}

#sobre .card1:hover {
  transform: translate(-6px, -6px) rotate(0deg);
  box-shadow: 18px 18px 0 #000;
}

#sobre .card2 {
  position: static;
  width: min(320px, 100%);
  flex-shrink: 0;
  transform: rotate(3deg);
  background-color: #E83F1F;
  z-index: 2;
}

#sobre .card2:hover {
  transform: translate(6px, -6px) rotate(0deg);
  box-shadow: 18px 18px 0 #000;
}

#sobre .card2 img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

#sobre .card3-foto {
  position: static;
  width: min(320px);
  flex-shrink: 0;
  transform: rotate(-2deg);
  background-color: #62AEA7;
  z-index: 2;
  margin: 0;
}



#sobre .card3-foto:hover {
  transform: translate(-6px, -6px) rotate(0deg);
  box-shadow: 18px 18px 0 #000;
}

#sobre .card3-foto img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

#sobre .card4 {
  position: static;
  width: 100%;
  max-width: 650px;
  height: fit-content; 
  flex: 1;
  transform: rotate(2deg);
  background-color: #91aeff;
  z-index: 2;
  margin: 0;
  display: flex;         
  flex-direction: column;
}


.row-extra {
  display: flex;
  gap: 40px;
  align-items: stretch;
}

#sobre .card4 a {
  background-color: #ffe26c;
}

#sobre .card4:hover {
  transform: translate(-6px, -6px) rotate(0deg);
  box-shadow: 18px 18px 0 #000;
}

/* =====================
   SEÇÃO PROJETOS — GRID
===================== */
#projetos .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px;
  position: static;
  align-items: start;
}

#projetos .card {
  position: relative;
  width: 100%;
  transform: rotate(-2deg);
  background-color: #FFA729;
}

#projetos .card img {
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}

#projetos .card:hover {
  transform: translate(-6px, -6px) rotate(0deg);
  box-shadow: 18px 18px 0 #000;
}

.projeto2 {
  background-color: #2aff66;
}

.projeto2 .content a {
  background-color: #ff10af;
  color: #000000;
}

.projeto2:hover {
  transform: translate(-6px, -6px) rotate(0deg);
  box-shadow: 18px 18px 0 #000;
}

/* =====================
   SEÇÃO SKILLS
===================== */
#skills {
  position: relative;
  height: auto;
  min-height: 100vh;
  padding: 60px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  align-content: flex-start;
}

.skill-card-1 {
  position: static;
  width: min(480px, 100%);
  transform: rotate(-2deg);
  background: #4cff1b;
}

.skill-card-2 {
  position: static;
  width: min(480px, 100%);
  transform: rotate(2deg);
  background: #ff3030;
  margin-left: auto;
}

.skill-card-3 {
  margin-top: 20px;
  margin-left: 20%;
  position: static;
  width: min(480px, 100%);
  transform: rotate(-4deg);
  background: #dc30ff;
}

.skill-card-1:hover,
.skill-card-2:hover,
.skill-card-3:hover {
  transform: translate(-6px, -6px) rotate(0deg);
  box-shadow: 18px 18px 0 #000;
}

.skill-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.skill-icons img {
  width: clamp(80px, 10vw, 128px);
  height: clamp(80px, 10vw, 128px);
  object-fit: contain;
  border: 4px solid #000;
  padding: 8px;
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.skill-icons img:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0 #000;
}

/* =====================
   SEÇÃO CV
===================== */
#cv {
  position: relative;
  height: auto;
  min-height: 60vh;
  padding: 60px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

.card.cv-card-1 {
  position: static;
  width: min(600px, 100%);
  transform: rotate(-2deg);
  background: #1bffb7;
}

.card.cv-card-1:hover {
  transform: translate(-6px, -6px) rotate(0deg);
  box-shadow: 18px 18px 0 #000;
}

.card.cv-card-1 a {
  background-color: #ff1088;
  color: #000000;
}

#cv .card.card5-foto {
  position: static;
  width: min(320px, 100%);
  flex-shrink: 0;
  transform: rotate(4deg);
  background-color: #f93dff;
  z-index: 2;
  margin-left: auto;
}

#cv .card.card5-foto:hover {
  transform: translate(-6px, -6px) rotate(0deg);
  box-shadow: 18px 18px 0 #000;
}

#cv .card.card5-foto img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* =====================
   FOOTER
===================== */
.footer {
  background-color: #FFF128;
  border-top: 8px solid #000;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-weight: 900;
  font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: 0.1em;
}

.footer-right {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-right a {
  background: #000;
  color: #FFF128;
  padding: 8px 16px;
  font-size: 13px;
  box-shadow: 4px 4px 0 #FF28B7;
}

.footer-right a:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #FF28B7;
}

/* =====================
   MOBILE — 768px
===================== */
@media (max-width: 768px) {
  .header {
    padding: 12px 20px;
  }
.row-extra {
    flex-direction: column;
    gap: 24px;
  }
  section {
    padding: 50px 20px;
  }

  #titulo {
    padding-bottom: 80px;
  }

  #sobre {
    padding-top: 40px;
  }

  #sobre .cards {
    flex-direction: column;
    gap: 24px;
  }

  #sobre .card2{
    width: 100%;
    margin-left: 0;
  }

  

#sobre .card3-foto, 
  #sobre .card4 {
    width: 100%;
    margin-left: 0;
    transform: rotate(0deg); 
  }


  #skills {
    padding: 40px 20px;
    gap: 28px;
  }

  .skill-card-1,
  .skill-card-2,
  .skill-card-3 {
    width: 100%;
    margin-left: 0;
  }

  #cv {
    padding: 40px 20px;
    gap: 28px;
  }

  .card.cv-card-1 {
    width: 100%;
  }

  #cv .card.card5-foto {
    width: 100%;
    margin-left: 0;
  }

  #projetos .cards {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer {
    padding: 16px 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  #sobre .card2 img,
  #sobre .card3-foto img,
  #cv .card.card5-foto img {
    width: auto;           
    max-width: 100%;        
    max-height: 250px;      
    object-fit: contain;    
    margin: 0 auto;
  
  }
}

/* =====================
   MOBILE — 480px
===================== */
@media (max-width: 480px) {
  .header {
    padding: 10px 16px;
    font-size: 13px;
  }

  .menu {
    gap: 10px;
    font-size: 12px;
  }

  section {
    padding: 40px 16px;
  }

  .botoes {
    flex-direction: column;
    align-items: center;
  }

  .footer-right {
    flex-direction: column;
    gap: 8px;
  }
}