/* Reset básico */
*{box-sizing:border-box;margin:0;padding:0}
html,body,#root{height:100%}

/* Tema escuro por padrão (valores base) */
:root{
  --accent:#2dd4bf;
  --bg:#061226;
  --card:#072033;
  --muted:#9aa6b2;
  --text:#e6eef2;
  --footer-bg:#021226;
  --radius:14px;
  --gap:1.25rem;
  --container-padding:2rem;
  /* aumentei mais: max maior e min maior para desktop maior */
  --hero-image-max:600px;
  --hero-image-min:300px;
  --glass: rgba(255,255,255,0.06);
  --brand-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

body{font-family:var(--brand-font);line-height:1.6;color:var(--text);background:linear-gradient(180deg,var(--bg) 0%, #031423 100%);transition:background .3s ease,color .3s ease;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:var(--container-padding)}


/* Classe opt-in para tema claro (se quiser sobrescrever) */
.light{
  --accent:#0ea5a4;
  --bg:#f8fafc;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --footer-bg:#0f172a;
}


.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{font-weight:800;font-size:1.125rem;letter-spacing:0.2px}
.nav{display:block}
.nav ul{display:flex;gap:1rem;list-style:none}
.nav a{padding:.35rem .6rem;border-radius:8px;color:var(--text);opacity:0.9;transition:opacity .15s ease, transform .15s ease}
.nav a:hover,.nav a:focus{opacity:1;transform:translateY(-2px)}

.nav-toggle{display:none;background:transparent;border:1px solid var(--glass);padding:.45rem;border-radius:8px;font-size:1.15rem;color:var(--text);backdrop-filter: blur(4px)}

/* header glass */
.site-header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg, rgba(2,6,23,0.28), transparent);backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,0.02)}

/* Hero */
.hero{padding:5rem 0}
.hero-inner{display:grid;grid-template-columns:1fr minmax(220px, 360px);gap:2.5rem;align-items:center}
.hero h1{font-size:clamp(1.6rem, 3.2vw, 2.5rem);margin-bottom:.6rem;line-height:1.05}
.lead{color:var(--muted);margin-bottom:1.1rem;max-width:60ch;font-size:clamp(0.95rem,1.6vw,1.05rem)}
.accent{color:var(--accent);font-weight:700}

/* Typing caret and styles for the typed name (using ::after so cursor follows text) */
#typed-name{display:inline;min-width:0;white-space:pre}
/* caret rendered as text '|' to ensure visibility even when parent is empty */
#typed-name::after{content: "|";display:inline-block;color:var(--accent);font-weight:700;margin-left:.35rem;vertical-align:middle;animation:blink 1s steps(1) infinite;transition:opacity .2s linear,transform .12s linear}

#typed-name.pretyping::after{animation: blink 1s steps(1) infinite, preType 700ms ease-in-out 1}
.accent.typing-done #typed-name::after{opacity:0}

@keyframes blink{50%{opacity:0}100%{opacity:1}}

/* Pre-typing small bounce/pulse so caret animates before first char */
@keyframes preType{0%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-4px) scaleY(1.02)}100%{transform:translateY(0) scaleY(1)}}

/* Hero image: circula, crop e borda */
.hero-image{display:flex;align-items:center;justify-content:center}
.hero-image img{width:260px;height:260px;object-fit:cover;border-radius:50%;border:6px solid rgba(45,212,191,0.12);box-shadow:0 18px 40px rgba(2,6,23,0.5);display:block;transition:transform .18s ease, box-shadow .18s ease}
.hero-image img:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(2,6,23,0.6)}



@media (max-width:1200px){
  .hero-image img{width:420px;height:420px}
}
@media (max-width:900px){
  .hero-image img{width:340px;height:340px}
}
@media (max-width:640px){
  .hero-image img{width:280px;height:280px}
}
.btn{display:inline-block;padding:clamp(.45rem,.9vw,.7rem) clamp(.75rem,1.8vw,1.1rem);background:var(--accent);color:#022;border-radius:10px;font-weight:600;box-shadow:0 6px 18px rgba(45,212,191,0.06);transition:transform .15s ease, box-shadow .15s ease;font-size:clamp(.9rem,.9vw,1rem)}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(45,212,191,0.08)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

/* botão de download do CV */
.btn.download{background:transparent;color:var(--accent);border:1px solid rgba(45,212,191,0.18);padding:clamp(.4rem,.8vw,.6rem) clamp(.65rem,1.4vw,.95rem);margin:0 .35rem;border-radius:10px}
.btn.download:hover{background:rgba(45,212,191,0.06);transform:translateY(-2px)}

/* Social icons minimalistas (hero) */
.social-icons{display:flex;gap:.5rem;margin-bottom:1.05rem}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:clamp(32px,6.5vw,42px);height:clamp(32px,6.5vw,42px);border-radius:10px;border:1px solid rgba(255,255,255,0.04);color:var(--text);background:transparent;transition:transform .12s ease, background .12s ease, border-color .12s ease}
.social-link svg{width:clamp(14px,3vw,18px);height:clamp(14px,3vw,18px);display:block}
/* Ajuste para ícones externos em <img> dentro de .social-link */
.social-link img{width:clamp(14px,3vw,18px);height:clamp(14px,3vw,18px);display:block}
.social-link:hover{transform:translateY(-4px);background:var(--glass);border-color:rgba(45,212,191,0.14);color:var(--accent)}
.social-link:focus{outline:2px solid rgba(45,212,191,0.12);outline-offset:2px}

@media (max-width:640px){
  .social-icons{justify-content:center}
}

/* About */
.about{padding:3rem 0}
/* Ajuste do grid: deixar a coluna de texto flexível e a coluna CTA com largura mínima/máxima
   Garantir que a coluna CTA não colapse quando vazia e que o texto preencha o espaço disponível */
/* Centralizar o grid e garantir que o bloco de texto fique no centro da página */
.about-grid{display:grid;/* agora: coluna esquerda com conteúdo auxiliar (CTA), coluna direita larga para o texto */
  grid-template-columns: minmax(220px,380px) 1fr;
  gap:1.5rem;align-items:stretch;justify-content:center}
.about-cta{display:flex;align-items:center;justify-content:center;padding:.5rem;min-width:220px}

/* Center About heading and text */
.about h2{text-align:center;margin-bottom:1rem;transform:translateY(15px);transition:transform .18s ease}
.about-text{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;width:100%;
  /* ocupar ambas as colunas do grid e ficar centralizado */
  grid-column: 1 / -1;max-width:1000px;margin:0 auto;/* deslocar para cima conforme pedido */
  transform:translateY(15px);transition:transform .18s ease}
/* manter boa legibilidade: limitar a largura das linhas e centralizar parágrafos */
.about-text p{max-width:70ch;margin:0 auto}
.about-text ul{display:block;text-align:left;margin:1rem auto 0;max-width:60ch}

/* Skills/icons abaixo do About */
.about-skills{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:1.25rem}
.skill-item{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:.6rem 0;width:180px}
.skill-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 6px 18px rgba(2,6,23,0.08);color:var(--accent)}
.skill-icon svg{width:30px;height:30px}
.skill-label{font-size:.95rem;color:var(--text);text-align:center}

@media (max-width:640px){
  .skill-item{width:45%}
}

/* Em telas bem largas, dar ainda mais espaço ao texto */
@media (min-width:1200px){
  .about-grid{grid-template-columns:1.7fr minmax(240px,420px)}
}
/* Lista de tecnologias com ícones */
.tech-items{display:flex;flex-wrap:wrap;gap:12px;margin-top:0.6rem}
.tech-item{display:flex;align-items:center;gap:10px;padding:clamp(6px,1.2vw,10px) clamp(8px,1.4vw,14px);border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 6px 18px rgba(2,6,23,0.12)}
.tech-item .tech-icon{width:clamp(28px,4.4vw,36px);height:clamp(28px,4.4vw,36px);flex:0 0 auto;border-radius:8px;display:flex;align-items:center;justify-content:center}
.tech-item .tech-icon svg{width:clamp(16px,2.8vw,20px);height:clamp(16px,2.8vw,20px)}
.tech-label{color:var(--text);font-size:clamp(.85rem,.9vw,.95rem)}

/* Projects */
.projects{padding:3rem 0}
/* Centralizar título e grade de projetos */
.projects h2{text-align:center;margin-bottom:1rem}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;max-width:1000px;margin:0 auto;justify-items:center}
.card{max-width:320px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:clamp(.9rem,1.8vw,1.25rem);border-radius:16px;box-shadow:0 6px 20px rgba(2,6,23,0.18);transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(2,6,23,0.28)}
.card h3{margin-top:.65rem}
.card h3{margin-top:.75rem}
.link{color:var(--accent)}

/* Contact */
.contact{padding:3rem 0}

/* Centralizar título do card principal de projeto */
.projects-grid .card.project-centered h3{ text-align: center; }
.projects-grid .card.project-centered img{ display:block; margin:0 auto; width:clamp(90px,18vw,140px); height:auto; object-fit:contain; }
.projects-grid .card.project-centered p{ text-align:center; font-size:clamp(.85rem,1.2vw,.95rem); color:var(--muted); line-height:1.4; }

/* Centralizar o link 'Ver Site' em cards específicos */
.projects-grid .card .card-link{ text-align:center; }
.projects-grid .card .card-link a.link { display:inline-block; transform:none; }

/* Regras reutilizáveis para centralizar título e aplicar mesma descrição do projeto 1 */
.projects-grid .card .centered-title{ text-align:center; }
.projects-grid .card .project-desc{ text-align:center; font-size:clamp(.85rem,1.2vw,.95rem); color:var(--muted); line-height:1.4; }

/* Descer 10px o link 'Ver Site' somente no primeiro card (project-centered) */
.projects-grid .card.project-centered p > a.link { display:inline-block; transform: translateY(10px); }
/* Centralizar título e grade de contato, limitar larguras do formulário e do painel de info */
.contact h2{text-align:center;margin-bottom:1rem}
.contact-grid{display:grid;grid-template-columns:1fr minmax(220px,320px);gap:1.5rem;max-width:1000px;margin:0 auto;align-items:start;justify-items:center}
.contact-form{max-width:600px;width:100%}
.contact-form label{display:block;margin-top:.65rem;margin-bottom:.35rem;font-weight:600}
.contact-form input,.contact-form textarea{width:100%;padding:.65rem;border:1px solid rgba(255,255,255,0.06);background:transparent;border-radius:10px;color:var(--text)}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid rgba(45,212,191,0.12);box-shadow:0 6px 18px rgba(2,6,23,0.12)}
.contact-info{max-width:320px;width:100%}

/* Fazer o bloco .contact-info ocupar ambas as colunas e centralizar os ícones
  Isso alinha os botões diretamente abaixo do título central da seção */
.contact-grid > .contact-info{grid-column:1 / -1;display:flex;justify-content:center}

/* E-mail exibido logo abaixo do título da seção (acima dos botões) */
.contact-top-email{display:flex;justify-content:center;margin:0.6rem 0 1rem}
.contact-top-email .email-link{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .6rem;border-radius:10px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:var(--text);transition:transform .12s ease, background .12s ease}
.contact-top-email .email-link .email-icon{width:20px;height:20px;display:block;flex:0 0 auto;color:var(--accent)}
.contact-top-email .email-link .email-text{font-size:1rem;color:var(--muted)}
.contact-top-email .email-link:hover{background:var(--glass);transform:translateY(-3px);box-shadow:0 8px 24px rgba(45,212,191,0.06)}

@media (max-width:640px){
  .contact-top-email{margin-bottom:.75rem}
  .contact-top-email .email-link{gap:.45rem;padding:.35rem .5rem}
  .contact-top-email .email-link .email-text{font-size:.92rem}
}

/* Contact icons row (below 'Entre em Contato') */
.contact-icons{display:flex;gap:1.8rem;justify-content:center;align-items:center;margin-top:1rem}
.contact-icons .social-link{width:auto;height:auto;padding:.45rem;border-radius:10px}

/* Cada item de rede com legenda embaixo */
.contact-icons .social-item{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.contact-icons .social-label{font-size:1rem;color:var(--muted);text-align:center}

/* Aumentar tamanho dos botões de contato (desktop) */
.contact-icons .social-item .social-link{width:72px;height:72px;padding:.7rem;border-radius:14px;display:inline-flex;align-items:center;justify-content:center}
.contact-icons .social-item .social-link img{width:32px;height:32px}

/* Ajustes responsivos para mobile: reduzir um pouco */
@media (max-width:640px){
  .contact-icons{gap:1rem}
  .contact-icons .social-item .social-link{width:56px;height:56px;padding:.45rem;border-radius:12px}
  .contact-icons .social-item .social-link img{width:22px;height:22px}
  .contact-icons .social-label{font-size:.88rem}
}

/* Hover color específico por app (usa o atributo aria-label para selecionar) */
.contact-icons .social-link{transition:background .18s ease, border-color .18s ease, box-shadow .18s ease}
.contact-icons .social-link img{transition:filter .18s ease, transform .18s ease}

.contact-icons .social-link[aria-label="Discord"]:hover{background:#5865F2;border-color:rgba(88,101,242,0.16);box-shadow:0 10px 30px rgba(88,101,242,0.12);color:#fff}
.contact-icons .social-link[aria-label="GitHub"]:hover{background:#24292F;border-color:rgba(36,41,47,0.14);box-shadow:0 10px 30px rgba(36,41,47,0.12);color:#fff}
.contact-icons .social-link[aria-label="WhatsApp"]:hover{background:#25D366;border-color:rgba(37,211,102,0.14);box-shadow:0 10px 30px rgba(37,211,102,0.10);color:#022}
.contact-icons .social-link[aria-label="Instagram"]:hover{background:linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);border-color:rgba(236,72,153,0.14);box-shadow:0 10px 30px rgba(236,72,153,0.10);color:#fff}

/* Tornar o ícone branco ao passar o mouse (funciona bem com SVGs simples) */
.contact-icons .social-link:hover img{filter:brightness(0) invert(1);transform:translateY(-3px)}

/* Footer */
.site-footer{padding:1.75rem 0;background:var(--footer-bg);color:var(--text);margin-top:3rem}
.site-footer .container{display:flex;align-items:center;justify-content:center}
.site-footer p{opacity:.85;text-align:center}

/* (Botão removido — estilos anteriores apagados) */

/* Responsividade */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .container{padding:1.25rem}
  /* remover o transform em telas pequenas para evitar sobreposição */
  .about h2, .about-text{transform:none;margin-top:0}
}
@media (max-width:640px){
  .nav ul{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav[data-open="true"] ul{display:flex;flex-direction:column;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));position:absolute;right:1rem;top:64px;padding:.75rem;border-radius:12px;box-shadow:0 14px 40px rgba(2,6,23,0.26)}
  .projects-grid{grid-template-columns:1fr}
  .container{padding:.9rem}
}

/* Small utilities */
.text-muted{color:var(--muted)}

/* Dark theme support (opt-in) */
.light .card{background:#ffffff}

/* Entrance animations */
.fade-in{animation:fadeIn .6s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Hero image sizing using clamp for better scaling */
.hero-image img{width:clamp(var(--hero-image-min),18vw,var(--hero-image-max));height:clamp(var(--hero-image-min),18vw,var(--hero-image-max));object-fit:cover}