/* =========================================
     VARIÁVEIS CONSOLIDADAS
     ========================================= */
:root {
  --red: #c0001a;
  --magenta: #d400a8;
  --pink: #ff4dc4;
  --cream: #f5f0e8;
  --grid: #c8c0b0;
  --win-blue: #0a246a;
  --win-gray: #d4d0c8;
  --win-dark: #808080;
  --win-light: #ffffff;
  --win-border: #a0a0a0;
  --yellow: #f7e6a5;
  --amareloqueimado: #F0B453;
  --text: #1a1a1a;

  --color-maroon: #6b0202;
  --color-red: hsl(0, 100%, 51%);
  --color-orange: #fe6600;
  --color-purple: #770093;
  --color-white: #ffffff;
  --color-dark: #000000;
  --color-light-red: #f0535f;

  --font-gravitas: 'Gravitas One', cursive;
  --font-great-vibes: 'Great Vibes', cursive;
  --font-montserrat-alt: 'Montserrat Alternates', sans-serif;
  --font-inter: 'Inter', sans-serif;
  --font-family: 'Syne', sans-serif;
  
  --font-pixel: 'VT323', monospace;
  --font-script: 'Dancing Script', cursive;
  --font-body: 'Nunito', sans-serif;
}

/* =========================================
   RESET E BASE
   ========================================= */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

body {
  font-family: var(--font-body);
  background: var(--amareloqueimado);
  background-image:
    linear-gradient(rgba(180,170,155,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,170,155,0.35) 1px, transparent 1px);
  background-size: 28px 28px;
  min-height: 100vh;
  color: var(--text);
  overflow-x: hidden;
}

/* =========================================
   CABEÇALHO DESKTOP PADRONIZADO
   ========================================= */
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 999;
  background-color: var(--color-maroon);
}

.logo-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 0 10px 0; 
  margin: 0;
  background-color: var(--color-maroon);
}

.logo-text {
  font-family: var(--font-great-vibes) !important;
  font-size: 54px ;
  color: var(--color-white);
  font-weight: 400 ;
  margin: 0 ;
  padding: 0 ;
  line-height: normal ;
  letter-spacing: normal ;
  -webkit-font-smoothing: antialiased ; 
  text-rendering: optimizeLegibility ; 
}

/* Esconde o menu mobile no Desktop */
.mobile-menu-icon, .mobile-menu { display: none; }

.nav-pills {
  width: 100%;
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center;
  align-items: flex-end; 
  background-color: var(--color-maroon); 
  gap: 0px; 
  margin: 0;
  padding: 0;
}

.pill {
  text-decoration: none;
  font-size: 18px;
  font-family: var(--font-montserrat-alt), sans-serif;
  height: 35px ;
  display: flex ;
  align-items: center ;
  justify-content: center ;
  padding: 0px 25px ;
  border-radius: 15px 15px 0px 0px ;
  color: var(--color-white); 
  background-color: var(--color-purple); 
  transition: opacity 0.3s ease; 
  margin: 10px 0 0 0;
  box-sizing: border-box ;
  white-space: nowrap ; 
}

.pill:hover { opacity: 0.8; }
.pill-inicio { background-color: var(--color-white); color: var(--color-maroon); box-shadow: 0 -4px 10px rgba(0,0,0,0.1); }
.pill-servicos { background-color: var(--color-light-red); }
.pill-iara { background-color: var(--color-purple); }
.pill-arte { background-color: #53b4f0; }

/* Destaque ativo para aba Portfólio */
.pill-portfolio.active { 
  color: var(--color-white); 
  background-color: var(--amareloqueimado); 
  font-weight: bold; 
  height: 40px !important; 
  margin-top: 5px !important; 
}

/* =========================================
   ESTRUTURA PRINCIPAL E TABS (WINDOWS UI)
   ========================================= */
main {
  max-width: 860px;
  margin: 36px auto;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.tabs { display: flex; gap: 0; flex-wrap: wrap; }
.tab-btn {
  font-family: var(--font-pixel);
  font-size: 1rem;
  padding: 7px 20px;
  background: var(--win-gray);
  border: 2px solid;
  border-bottom: none;
  border-top-color: var(--win-light);
  border-left-color: var(--win-light);
  border-right-color: var(--win-dark);
  cursor: pointer;
  color: var(--text);
  opacity: 0.7;
  transition: opacity 0.15s;
}
.tab-btn.active {
  opacity: 1;
  background: #fff;
  border-bottom: 2px solid #fff;
  margin-bottom: -2px;
  z-index: 2;
  position: relative;
  color: var(--red);
}
.tab-content { display: none; }
.tab-content.active { display: block; }

.win {
  border: 2px solid;
  border-top-color: var(--win-light);
  border-left-color: var(--win-light);
  border-right-color: #404040;
  border-bottom-color: #404040;
  background: var(--win-gray);
  box-shadow: 2px 2px 0 #000;
}
.win-bar {
  background: linear-gradient(90deg, var(--win-blue) 0%, #1084d0 100%);
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.win-btn {
  background: var(--win-gray);
  border: 2px solid;
  border-top-color: var(--win-light);
  border-left-color: var(--win-light);
  border-right-color: #404040;
  border-bottom-color: #404040;
  width: 18px; height: 16px;
  font-size: 0.68rem;
  display: inline-grid; place-items: center;
  cursor: pointer; color: #000;
  font-weight: 900;
}
.win-body {
  padding: 20px 22px;
  background: #fff;
  border: 2px inset var(--win-border);
  margin: 6px;
}

/* =========================================
   ELEMENTOS DE CONTEÚDO (CASES)
   ========================================= */
.breadcrumb { 
    font-family: var(--font-pixel); 
    font-size: 1rem; 
    color: var(--win-dark); 
    display: flex; 
    align-items: center; 
    gap: 6px;
    }
    
.breadcrumb a { color: var(--red); text-decoration: underline; cursor: pointer; }

.meta-bar {
    display: flex; 
    flex-wrap: wrap;
    gap: 8px; 
    align-items: center; 
    padding: 10px 0 4px; 
    border-bottom: 1px dashed #bbb;
    margin-bottom: 16px;
    }
    
.tag {
    font-family: var(--font-pixel);
    font-size: 0.95rem; 
    padding: 2px 10px; 
    border: 1px solid; 
    border-radius: 2px; 
    background: var(--win-gray); 
    color: var(--text);
    border-color: var(--win-dark);
    }
    
.tag.hot  { background: var(--magenta); color: #fff; border-color: #9a007a; }
.tag.date { background: var(--red); color: #fff; border-color: #8a0010; }
.tag.area { background: var(--win-blue); color: #fff; border-color: #040e4a; }
.tag.green{ background: #006620; color: #fff; border-color: #003d10; }

.case-title { font-family: var(--font-script); font-size: 2.1rem; color: var(--red); line-height: 1.15; margin-bottom: 6px; }
.case-subtitle { font-family: var(--font-pixel); font-size: 1.25rem; color: var(--magenta); margin-bottom: 18px; }
.section-label { 
    font-family: var(--font-pixel); 
    font-size: 1rem;
    color: var(--win-dark); 
    background: var(--win-gray);
    border: 1px solid var(--win-border); 
    padding: 2px 10px; display: inline-block;
    margin-bottom: 10px; 
    margin-top: 22px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    
}

p { font-size: 0.96rem; line-height: 1.75; color: #2a2a2a; margin-bottom: 14px; }
strong { color: var(--red); }

.img-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.img-frame { 
    flex: 1; 
    min-width: 200px; 
    border: 3px solid; 
    border-top-color: #404040;
    border-left-color: #404040;
    border-right-color: var(--win-light);
    border-bottom-color: var(--win-light); background: #ddd; 
    
}

.img-frame img { width: 100%; display: block; }
.img-caption { 
    font-family: var(--font-pixel);
    font-size: 0.88rem; 
    color: #555;
    text-align: center; 
    padding: 4px 6px 6px; 
    background: var(--win-gray); 
    border-top: 1px solid var(--win-border);
    }
    
.img-placeholder {
    width: 100%;
    aspect-ratio: 4/3; 
    background: linear-gradient(135deg, #e0d8cc 0%, #c0b8ac 100%); 
    display: flex; 
    flex-direction: column; 
    align-items: center; justify-content: center;
    gap: 6px; 
    color: #888;
    font-family: var(--font-pixel); font-size: 0.95rem;
    }
    
.img-placeholder .icon { font-size: 2.2rem; }

.stats-grid {
    display: grid; grid-template-columns: 
    repeat(auto-fit, minmax(140px, 1fr)); 
    gap: 10px; margin: 20px 0; 
    
}
.stat-card {
    background: var(--win-gray); 
    border: 2px solid; 
    border-top-color: var(--win-light); 
    border-left-color: var(--win-light);
    border-right-color: #404040; 
    border-bottom-color: #404040; 
    padding: 12px 10px; text-align: center; 
    
}

.stat-num { font-family: var(--font-pixel); font-size: 1.9rem; color: var(--red); line-height: 1; display: block; }
.stat-label { font-family: var(--font-body); font-size: 0.73rem; color: #555; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }

.results-box { 
    background: var(--win-gray); 
    border: 2px solid;
    border-top-color: var(--win-light); 
    border-left-color: var(--win-light);
    border-right-color: #404040; 
    border-bottom-color: #404040; 
    margin: 24px 0 8px; 
    box-shadow: 2px 2px 0 #000;
    }
    
.results-bar {
    background: linear-gradient(90deg, var(--magenta), #9900cc);
    color: #fff; font-family:
    var(--font-pixel); 
    font-size: 1rem; 
    padding: 3px 10px;
    display: flex; justify-content: space-between; align-items: center;
    }
    
.results-inner { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.result-item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.93rem; }
.result-item .bullet { font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.result-item strong { display: block; font-size: 0.82rem; color: var(--red); }

.skills-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.skill-chip { font-family: var(--font-pixel); font-size: 0.92rem; padding: 3px 12px; background: #f0eae0; border: 1px solid var(--win-border); border-radius: 2px; color: #333; }

.ext-link { font-family: var(--font-pixel); font-size: 1rem; color: var(--win-blue); text-decoration: underline; word-break: break-all; }

.cta-bar { background: linear-gradient(90deg, var(--magenta) 0%, #9900cc 100%); padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.cta-bar p { color: #fff; font-weight: 700; margin: 0; font-size: 0.95rem; }
.btn-win { 
    font-family: var(--font-pixel); 
    font-size: 1rem; padding: 6px 20px;
    background: var(--win-gray);
    border: 2px solid; 
    border-top-color: var(--win-light); 
    border-left-color: var(--win-light); 
    border-right-color: #404040;
    border-bottom-color: #404040; 
    cursor: pointer; color: var(--text); 
    text-decoration: none; display: inline-block; 
    
}
.btn-win.primary { background: var(--yellow); font-weight: 900; }
.case-divider { border: none; border-top: 2px dashed var(--win-border); margin: 30px 0 10px; }

/* Animações e Elementos Flutuantes */
.floater { position: fixed; pointer-events: none; opacity: 0.15; font-size: 2.8rem; z-index: 0; animation: floatY 6s ease-in-out infinite; }
.floater:nth-child(1) { bottom: 80px; right: 40px; }
.floater:nth-child(2) { bottom: 160px; right: 80px; animation-delay: 2s; font-size: 2rem; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* =========================================
   TEASER E FOOTER PADRONIZADO
   ========================================= */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 10%;
  background-color: var(--color-maroon);
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer-title {
  font-size: 36px;
  color: var(--color-white);
  font-weight: 600;
}

.copyright {
  font-size: 14px;
  color: var(--color-white);
  text-align: right;
  margin-top: 8px;
}

.social-icons { display: flex; gap: 20px; justify-content: flex-start; }
.social-icons img { width: 32px; cursor: pointer; transition: transform 0.3s; filter: brightness(0) invert(1); } /* Torna os ícones sociais brancos */
.social-icons img:hover { transform: translateY(-5px); }

/* =========================================
   RESPONSIVIDADE ESTRITA: CELULARES (Até 600px)
   ========================================= */
@media screen and (max-width: 600px) {
  /* TRAVA O SITE (Impede a "dança" para os lados) */
  html, body {
    overflow-x: hidden ;
    width: 100% ;
    max-width: 100vw ;
    margin: 0 ;
    padding: 0 ;
  }

  /* CABEÇALHO MOBILE PADRONIZADO (Logo + Menu) */
  .header { padding-top: 15px ; }

  .logo-container {
    padding: 0 ; 
    margin-bottom: 5px ;
  }

  .logo-text { font-size: 40px ; }

  /* MODO MOBILE: MENU HAMBÚRGUER */
  .desktop-menu { display: none ;}

  .mobile-menu-icon {
      display: block ;
      width: 100% ;
      text-align: center ;
      background-color: var(--color-maroon);
      padding: 0 0 15px 0 ;
      margin: 0 ;
  }

  .mobile-menu-icon button {
      background: transparent;
      border: none;
      cursor: pointer;
      color: var(--color-white);
      font-size: 40px; 
      line-height: 1 ;
      padding: 0 ;
      margin: 0 ;
  }

  .mobile-menu {
      display: none; 
      width: 100% ;
      background-color: var(--color-maroon);
      padding: 0 0 20px 0;
  }

  .mobile-menu.open { display: block ; }

  .mobile-menu ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
  }

  .mobile-menu .nav-link {
      text-decoration: none;
      color: var(--color-white);
      font-size: 20px;
      font-family: var(--font-montserrat-alt);
      font-weight: 500;
      padding: 10px;
      display: block;
  }

  /* RODAPÉ CENTRALIZADO NO CELULAR */
  .footer {
    flex-direction: column ;
    text-align: center;
    gap: 20px ;
    padding: 40px 5% ;
    width: 100% ;
    box-sizing: border-box ;
  }
  
  .footer-content { align-items: center; }
  .social-icons { justify-content: center ; }
  .footer-title { font-size: 30px ; }
  .copyright { text-align: center ; }

  /* AJUSTES ESPECÍFICOS DOS CASES NO CELULAR */
  .case-title { font-size: 1.6rem; }
  .img-row { flex-direction: column; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  
  /* Ajusta os botões das abas para não quebrarem a tela */
  .tabs { justify-content: center; margin-bottom: 15px; }
  .tab-btn { font-size: 0.85rem; padding: 7px 12px; }
}