.elementor-11 .elementor-element.elementor-element-d08596f{--display:flex;}.elementor-11 .elementor-element.elementor-element-d08596f:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-d08596f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(360deg, #000000 100%, #0D0124 100%);}.elementor-11 .elementor-element.elementor-element-4386e67{width:100%;max-width:100%;}:root{--page-title-display:none;}/* Start custom CSS */<!-- ============================================================
     PORTFÓLIO — HTML5 + CSS3 (sem JavaScript)
     Cole este bloco inteiro em: Elementor → Widget HTML
     ------------------------------------------------------------
     ONDE TROCAR A FOTO:  procure por  URL-DA-MINHA-FOTO
     ONDE TROCAR PROJETOS: procure por  <!-- PROJETO 1 -->
     ============================================================ -->

<style>
/* ============================================================
   1. VARIÁVEIS
   ============================================================ */
.portfolio-jussan{
  --bg:#0A0B0D;
  --surface:#101216;
  --surface-2:#15181D;
  --text:#E9ECF1;
  --muted:#98A1AE;
  --accent:#7FA8FF;
  --accent-soft:rgba(127,168,255,.14);
  --accent-line:rgba(127,168,255,.38);
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.14);
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 18px 40px -22px rgba(0,0,0,.9);
  --sans:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono","Consolas",monospace;
  --maxw:1180px;
}

/* ============================================================
   2. RESET LOCAL (escopado)
   ============================================================ */
.portfolio-jussan,
.portfolio-jussan *,
.portfolio-jussan *::before,
.portfolio-jussan *::after{box-sizing:border-box;}

.portfolio-jussan{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  max-width:100%;
  position:relative;
}
.portfolio-jussan img{max-width:100%;display:block;height:auto;}
.portfolio-jussan ul{list-style:none;margin:0;padding:0;}
.portfolio-jussan p{margin:0 0 1rem;}
.portfolio-jussan h1,
.portfolio-jussan h2,
.portfolio-jussan h3,
.portfolio-jussan h4{margin:0 0 .6rem;line-height:1.2;letter-spacing:-.02em;font-weight:600;}
.portfolio-jussan a{color:inherit;text-decoration:none;}
.portfolio-jussan a:focus-visible,
.portfolio-jussan button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}
html{scroll-behavior:smooth;}

/* ============================================================
   3. ESTRUTURA
   ============================================================ */
.portfolio-jussan .pj-wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px;
}
.portfolio-jussan .pj-section{
  padding:64px 0;
  position:relative;
  scroll-margin-top:76px;
}
.portfolio-jussan .pj-section + .pj-section{border-top:1px solid var(--border);}

.portfolio-jussan .pj-head{margin-bottom:34px;max-width:62ch;}
.portfolio-jussan .pj-head h2{
  font-size:1.6rem;
  font-weight:600;
}
.portfolio-jussan .pj-head p{color:var(--muted);font-size:.98rem;margin:0;}
.portfolio-jussan .pj-mark{
  display:block;
  width:34px;height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
  margin-bottom:16px;
  border-radius:2px;
}

/* fundo com grid tecnológico discreto */
.portfolio-jussan .pj-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 25%,transparent 78%);
  pointer-events:none;
}

/* cards base */
.portfolio-jussan .pj-card{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  position:relative;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.portfolio-jussan .pj-card:hover{
  transform:translateY(-4px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow);
}
.portfolio-jussan .pj-card h3{font-size:1.02rem;}
.portfolio-jussan .pj-card p{color:var(--muted);font-size:.92rem;margin:0;}

/* botões */
.portfolio-jussan .pj-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  border-radius:999px;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.04em;
  border:1px solid var(--border-strong);
  background:rgba(255,255,255,.03);
  color:var(--text);
  transition:transform .25s ease,background .25s ease,border-color .25s ease,color .25s ease;
  min-height:44px;
}
.portfolio-jussan .pj-btn:hover{
  transform:translateY(-2px);
  border-color:var(--accent-line);
  background:var(--accent-soft);
}
.portfolio-jussan .pj-btn--primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#080A0E;
}
.portfolio-jussan .pj-btn--primary:hover{
  background:#9CBBFF;
  border-color:#9CBBFF;
  color:#080A0E;
  box-shadow:0 10px 26px -12px rgba(127,168,255,.7);
}
.portfolio-jussan .pj-btn svg{width:16px;height:16px;flex:none;}

/* ============================================================
   4. HEADER / MENU
   ============================================================ */
.portfolio-jussan .pj-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(10,11,13,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.portfolio-jussan .pj-nav{
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:12px 20px;
  max-width:var(--maxw);
  margin:0 auto;
}
.portfolio-jussan .pj-nav::-webkit-scrollbar{display:none;}
.portfolio-jussan .pj-nav a{
  position:relative;
  white-space:nowrap;
  padding:8px 12px;
  font-size:.88rem;
  color:var(--muted);
  border-radius:8px;
  transition:color .25s ease;
}
.portfolio-jussan .pj-nav a::after{
  content:"";
  position:absolute;
  left:12px;right:12px;bottom:2px;
  height:1.5px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.portfolio-jussan .pj-nav a:hover{color:var(--text);}
.portfolio-jussan .pj-nav a:hover::after{transform:scaleX(1);}

/* ============================================================
   5. HERO
   ============================================================ */
.portfolio-jussan .pj-hero{
  position:relative;
  padding:56px 0 56px;
  overflow:hidden;
}
.portfolio-jussan .pj-hero::before{
  content:"";
  position:absolute;
  top:-180px;right:-140px;
  width:420px;height:420px;
  background:radial-gradient(circle,rgba(127,168,255,.16),transparent 65%);
  filter:blur(10px);
  pointer-events:none;
}
.portfolio-jussan .pj-hero-inner{
  position:relative;
  display:grid;
  gap:38px;
  align-items:center;
}
.portfolio-jussan .pj-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:.78rem;
  color:var(--muted);
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  padding:7px 14px;
  border-radius:999px;
  margin-bottom:20px;
}
.portfolio-jussan .pj-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(127,168,255,.45);
  animation:pjPulse 3.2s ease-out infinite;
  flex:none;
}
@keyframes pjPulse{
  0%{box-shadow:0 0 0 0 rgba(127,168,255,.45);}
  70%{box-shadow:0 0 0 9px rgba(127,168,255,0);}
  100%{box-shadow:0 0 0 0 rgba(127,168,255,0);}
}
.portfolio-jussan .pj-hero h1{
  font-size:clamp(2rem,8vw,3.4rem);
  font-weight:650;
  letter-spacing:-.035em;
  line-height:1.05;
  margin-bottom:14px;
}
.portfolio-jussan .pj-role{
  font-size:clamp(.95rem,3.4vw,1.1rem);
  color:var(--accent);
  font-weight:500;
  margin-bottom:16px;
}
.portfolio-jussan .pj-lead{
  color:var(--muted);
  max-width:52ch;
  font-size:1rem;
}
.portfolio-jussan .pj-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:22px 0 26px;
}
.portfolio-jussan .pj-tag{
  font-size:.78rem;
  color:var(--muted);
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  padding:6px 13px;
  border-radius:999px;
  transition:border-color .3s ease,color .3s ease;
}
.portfolio-jussan .pj-tag:hover{border-color:var(--accent-line);color:var(--text);}
.portfolio-jussan .pj-actions{display:flex;flex-wrap:wrap;gap:10px;}

/* foto */
.portfolio-jussan .pj-photo{
  position:relative;
  width:min(300px,78vw);
  margin:0 auto;
}
.portfolio-jussan .pj-photo-frame{
  position:relative;
  aspect-ratio:1/1;
  border-radius:26px;
  padding:6px;
  background:linear-gradient(150deg,rgba(127,168,255,.45),rgba(255,255,255,.05) 45%,rgba(127,168,255,.18));
  box-shadow:0 30px 60px -30px rgba(0,0,0,1),0 0 44px -18px rgba(127,168,255,.45);
}
.portfolio-jussan .pj-photo-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  border-radius:21px;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/22px 22px,
    var(--surface-2);
  filter:saturate(1.02) contrast(1.02);
}
/* cantos decorativos */
.portfolio-jussan .pj-photo::before,
.portfolio-jussan .pj-photo::after{
  content:"";
  position:absolute;
  width:30px;height:30px;
  border:1.5px solid var(--accent-line);
  pointer-events:none;
}
.portfolio-jussan .pj-photo::before{
  top:-10px;left:-10px;
  border-right:0;border-bottom:0;
  border-top-left-radius:12px;
}
.portfolio-jussan .pj-photo::after{
  bottom:-10px;right:-10px;
  border-left:0;border-top:0;
  border-bottom-right-radius:12px;
}
.portfolio-jussan .pj-orbit{
  position:absolute;
  inset:-26px;
  border:1px dashed rgba(255,255,255,.07);
  border-radius:34px;
  animation:pjFloat 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pjFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
.portfolio-jussan .pj-chip{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.02em;
  color:var(--text);
  background:rgba(12,14,18,.78);
  border:1px solid var(--border-strong);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:7px 14px;
  border-radius:999px;
  white-space:nowrap;
}

/* ============================================================
   6. MINI INDICADORES
   ============================================================ */
.portfolio-jussan .pj-indicators{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:34px;
  position:relative;
}
.portfolio-jussan .pj-ind{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.02);
  padding:16px 14px;
  transition:border-color .3s ease,background .3s ease;
}
.portfolio-jussan .pj-ind:hover{border-color:var(--accent-line);background:var(--accent-soft);}
.portfolio-jussan .pj-ind strong{
  display:block;
  font-size:.95rem;
  font-weight:600;
  margin-bottom:2px;
}
.portfolio-jussan .pj-ind span{font-size:.8rem;color:var(--muted);}

/* ============================================================
   7. SOBRE
   ============================================================ */
.portfolio-jussan .pj-about{display:grid;gap:26px;}
.portfolio-jussan .pj-about-text p{color:var(--muted);max-width:64ch;}
.portfolio-jussan .pj-about-text strong{color:var(--text);font-weight:600;}
.portfolio-jussan .pj-about-cards{display:grid;gap:12px;}

/* ============================================================
   8. CONHECIMENTOS
   ============================================================ */
.portfolio-jussan .pj-cols{display:grid;gap:14px;}
.portfolio-jussan .pj-skill-head{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:14px;
}
.portfolio-jussan .pj-icon{
  width:38px;height:38px;
  flex:none;
  display:grid;
  place-items:center;
  border-radius:11px;
  border:1px solid var(--border-strong);
  background:var(--accent-soft);
  color:var(--accent);
}
.portfolio-jussan .pj-icon svg{width:19px;height:19px;}
.portfolio-jussan .pj-skill-head h3{margin:0;font-size:1rem;}
.portfolio-jussan .pj-list li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:.92rem;
  color:var(--muted);
  padding:5px 0;
}
.portfolio-jussan .pj-list li::before{
  content:"";
  width:5px;height:5px;
  margin-top:9px;
  border-radius:50%;
  background:var(--accent);
  opacity:.75;
  flex:none;
}

/* ============================================================
   9. CAPACIDADES + PROJETOS
   ============================================================ */
.portfolio-jussan .pj-cards-3{display:grid;gap:14px;}

.portfolio-jussan .pj-project{
  overflow:hidden;
  padding:0;
  display:flex;
  flex-direction:column;
}
.portfolio-jussan .pj-project-media{
  position:relative;
  aspect-ratio:16/9;
  background:
    radial-gradient(circle at 30% 30%,rgba(127,168,255,.12),transparent 60%),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/26px 26px,
    var(--surface-2);
  border-bottom:1px solid var(--border);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.portfolio-jussan .pj-project-media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.portfolio-jussan .pj-project:hover .pj-project-media img{transform:scale(1.04);}
.portfolio-jussan .pj-placeholder{
  font-family:var(--mono);
  font-size:.72rem;
  color:var(--muted);
  border:1px dashed var(--border-strong);
  border-radius:8px;
  padding:8px 12px;
  text-align:center;
  max-width:88%;
}
.portfolio-jussan .pj-project-body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1;}
.portfolio-jussan .pj-project-body h3{margin:0;}
.portfolio-jussan .pj-project-body p{flex:1;}
.portfolio-jussan .pj-stack{
  display:flex;flex-wrap:wrap;gap:6px;
}
.portfolio-jussan .pj-stack span{
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--muted);
  border:1px solid var(--border);
  border-radius:6px;
  padding:4px 9px;
}
.portfolio-jussan .pj-project-actions{display:flex;flex-wrap:wrap;gap:8px;}
.portfolio-jussan .pj-project-actions .pj-btn{padding:10px 16px;font-size:.8rem;min-height:40px;}

/* ============================================================
   10. GITHUB
   ============================================================ */
.portfolio-jussan .pj-github{
  position:relative;
  overflow:hidden;
  display:grid;
  gap:18px;
  align-items:center;
  padding:30px 24px;
  border:1px solid var(--border-strong);
  border-radius:20px;
  background:
    radial-gradient(circle at 88% 15%,rgba(127,168,255,.15),transparent 55%),
    linear-gradient(180deg,var(--surface-2),var(--surface));
}
.portfolio-jussan .pj-github h2{font-size:1.4rem;margin-bottom:8px;}
.portfolio-jussan .pj-github p{color:var(--muted);margin:0;max-width:46ch;}
.portfolio-jussan .pj-github-mark{
  width:52px;height:52px;
  display:grid;place-items:center;
  border-radius:14px;
  border:1px solid var(--border-strong);
  background:rgba(255,255,255,.04);
  color:var(--text);
  margin-bottom:16px;
}
.portfolio-jussan .pj-github-mark svg{width:26px;height:26px;}

/* ============================================================
   11. FORMAÇÃO (timeline) + CURSOS
   ============================================================ */
.portfolio-jussan .pj-timeline{
  position:relative;
  padding-left:26px;
  border-left:1px solid var(--border);
  display:grid;
  gap:16px;
}
.portfolio-jussan .pj-tl-item{position:relative;}
.portfolio-jussan .pj-tl-item::before{
  content:"";
  position:absolute;
  left:-31px;top:24px;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--accent);
}
.portfolio-jussan .pj-tl-item--next::before{border-color:var(--border-strong);}
.portfolio-jussan .pj-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:.75rem;
  color:var(--accent);
  border:1px solid var(--accent-line);
  background:var(--accent-soft);
  padding:4px 11px;
  border-radius:999px;
  margin-bottom:10px;
}
.portfolio-jussan .pj-tl-item--next .pj-status{
  color:var(--muted);
  border-color:var(--border);
  background:rgba(255,255,255,.02);
}
.portfolio-jussan .pj-tl-item--next{border-style:dashed;}

.portfolio-jussan .pj-courses{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
}
.portfolio-jussan .pj-course{
  padding:18px 16px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.02);
  transition:transform .3s ease,border-color .3s ease,background .3s ease;
}
.portfolio-jussan .pj-course:hover{
  transform:translateY(-3px);
  border-color:var(--accent-line);
  background:var(--accent-soft);
}
.portfolio-jussan .pj-course h3{font-size:.95rem;margin:0 0 4px;}
.portfolio-jussan .pj-course span{font-size:.78rem;color:var(--muted);}
.portfolio-jussan .pj-course--open{border-style:dashed;}

/* ============================================================
   12. TECNOLOGIAS
   ============================================================ */
.portfolio-jussan .pj-badges{display:flex;flex-wrap:wrap;gap:9px;}
.portfolio-jussan .pj-badge{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--text);
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  padding:9px 15px;
  border-radius:9px;
  transition:border-color .3s ease,transform .3s ease;
}
.portfolio-jussan .pj-badge:hover{border-color:var(--accent-line);transform:translateY(-2px);}
.portfolio-jussan .pj-badge--soft{color:var(--muted);background:none;}

/* ============================================================
   13. CONTATO + REDES + FOOTER
   ============================================================ */
.portfolio-jussan .pj-contact{
  position:relative;
  text-align:left;
}
.portfolio-jussan .pj-contact h2{font-size:clamp(1.7rem,6vw,2.4rem);}
.portfolio-jussan .pj-contact .pj-lead{margin-bottom:26px;}
.portfolio-jussan .pj-contact-grid{display:grid;gap:12px;margin-bottom:26px;}
.portfolio-jussan .pj-contact-item{
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.02);
  transition:border-color .3s ease,transform .3s ease,background .3s ease;
}
.portfolio-jussan .pj-contact-item:hover{
  border-color:var(--accent-line);
  background:var(--accent-soft);
  transform:translateY(-2px);
}
.portfolio-jussan .pj-contact-item .pj-icon{width:40px;height:40px;}
.portfolio-jussan .pj-contact-item strong{display:block;font-size:.93rem;font-weight:600;word-break:break-word;}
.portfolio-jussan .pj-contact-item span{font-size:.78rem;color:var(--muted);}

.portfolio-jussan .pj-footer{
  border-top:1px solid var(--border);
  padding:26px 0 34px;
  display:grid;
  gap:12px;
  align-items:center;
}
.portfolio-jussan .pj-footer p{font-size:.82rem;color:var(--muted);margin:0;}
.portfolio-jussan .pj-footer-links{display:flex;gap:8px;flex-wrap:wrap;}
.portfolio-jussan .pj-footer-links a{
  width:40px;height:40px;
  display:grid;place-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--muted);
  transition:color .3s ease,border-color .3s ease,transform .3s ease;
}
.portfolio-jussan .pj-footer-links a:hover{color:var(--text);border-color:var(--accent-line);transform:translateY(-2px);}
.portfolio-jussan .pj-footer-links svg{width:18px;height:18px;}

/* ============================================================
   14. ANIMAÇÕES (entrada suave — apenas no carregamento)
   ============================================================ */
@keyframes pjIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
.portfolio-jussan .pj-in{animation:pjIn .7s ease both;}
.portfolio-jussan .pj-d1{animation-delay:.08s;}
.portfolio-jussan .pj-d2{animation-delay:.16s;}
.portfolio-jussan .pj-d3{animation-delay:.24s;}
.portfolio-jussan .pj-d4{animation-delay:.32s;}

@media (prefers-reduced-motion:reduce){
  .portfolio-jussan *,
  .portfolio-jussan *::before,
  .portfolio-jussan *::after{
    animation:none;
    transition-duration:.01ms;
  }
  html{scroll-behavior:auto;}
}

/* ============================================================
   15. RESPONSIVIDADE (mobile first)
   ============================================================ */
@media (min-width:600px){
  .portfolio-jussan .pj-indicators{grid-template-columns:repeat(4,1fr);}
  .portfolio-jussan .pj-about-cards{grid-template-columns:repeat(2,1fr);}
  .portfolio-jussan .pj-contact-grid{grid-template-columns:repeat(2,1fr);}
  .portfolio-jussan .pj-footer{grid-template-columns:1fr auto;}
}
@media (min-width:768px){
  .portfolio-jussan .pj-wrap{padding:0 28px;}
  .portfolio-jussan .pj-nav{padding:14px 28px;}
  .portfolio-jussan .pj-section{padding:80px 0;}
  .portfolio-jussan .pj-hero{padding:72px 0;}
  .portfolio-jussan .pj-head h2{font-size:1.9rem;}
  .portfolio-jussan .pj-cols{grid-template-columns:repeat(3,1fr);}
  .portfolio-jussan .pj-cards-3{grid-template-columns:repeat(2,1fr);}
  .portfolio-jussan .pj-about{grid-template-columns:1.15fr .85fr;align-items:start;}
  .portfolio-jussan .pj-github{grid-template-columns:1fr auto;padding:38px 34px;}
  .portfolio-jussan .pj-timeline{padding-left:32px;}
}
@media (min-width:1024px){
  .portfolio-jussan .pj-hero-inner{grid-template-columns:1.1fr .9fr;gap:52px;}
  .portfolio-jussan .pj-hero{padding:92px 0 78px;}
  .portfolio-jussan .pj-photo{width:340px;margin:0 0 0 auto;}
  .portfolio-jussan .pj-cards-3{grid-template-columns:repeat(3,1fr);}
  .portfolio-jussan .pj-contact-grid{grid-template-columns:repeat(3,1fr);}
  .portfolio-jussan .pj-section{padding:96px 0;}
}
@media (min-width:1440px){
  .portfolio-jussan{font-size:17px;}
}
</style>

<div class="portfolio-jussan">

  <!-- ================= HEADER / MENU ================= -->
  <header class="pj-header">
    <nav class="pj-nav" aria-label="Navegação do portfólio">
      <a href="#inicio">Início</a>
      <a href="#sobre">Sobre</a>
      <a href="#conhecimentos">Conhecimentos</a>
      <a href="#projetos">Projetos</a>
      <a href="#formacao">Formação</a>
      <a href="#contato">Contato</a>
    </nav>
  </header>

  <main>

    <!-- ================= HERO ================= -->
    <section class="pj-hero" id="inicio">
      <span class="pj-grid-bg" aria-hidden="true"></span>
      <div class="pj-wrap">
        <div class="pj-hero-inner">

          <div class="pj-in pj-d1">
            <span class="pj-eyebrow"><span class="pj-dot" aria-hidden="true"></span>Guará, Brasília – DF</span>

            <!-- ÚNICA ocorrência do nome completo em todo o portfólio -->
            <h1>Jussanrley Castro</h1>

            <p class="pj-role">Estudante de ADS • Tecnologia • Desenvolvimento Web</p>

            <p class="pj-lead">Estudo Análise e Desenvolvimento de Sistemas e construo conhecimento prático em desenvolvimento web, informática, hardware e sistemas operacionais.</p>

            <div class="pj-tags">
              <span class="pj-tag">ADS em andamento</span>
              <span class="pj-tag">Web</span>
              <span class="pj-tag">TI &amp; Hardware</span>
              <span class="pj-tag">Inteligência Artificial</span>
            </div>

            <div class="pj-actions">
              <a class="pj-btn pj-btn--primary" href="#projetos">VER PROJETOS</a>
              <a class="pj-btn" href="https://github.com/sancastro-x" target="_blank" rel="noopener">
                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5A11.5 11.5 0 0 0 .5 12a11.5 11.5 0 0 0 7.86 10.92c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.53-1.34-1.29-1.7-1.29-1.7-1.06-.72.08-.71.08-.71 1.17.08 1.78 1.2 1.78 1.2 1.04 1.79 2.74 1.27 3.41.97.1-.76.4-1.28.73-1.57-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.8 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.24 2.76.12 3.05.74.81 1.18 1.84 1.18 3.1 0 4.43-2.69 5.4-5.25 5.69.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56A11.5 11.5 0 0 0 23.5 12 11.5 11.5 0 0 0 12 .5Z"/></svg>
                GITHUB
              </a>
              <a class="pj-btn" href="https://www.linkedin.com/in/juss%C3%A2n-castro-5ab22840b/" target="_blank" rel="noopener">
                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5A2.5 2.5 0 1 1 0 3.5a2.5 2.5 0 0 1 4.98 0ZM.25 8.25h4.5V24H.25V8.25Zm7.5 0h4.31v2.15h.06c.6-1.13 2.07-2.32 4.26-2.32 4.56 0 5.4 2.99 5.4 6.88V24h-4.5v-7.98c0-1.9-.03-4.35-2.65-4.35-2.66 0-3.07 2.07-3.07 4.21V24h-4.5V8.25Z"/></svg>
                LINKEDIN
              </a>
              <a class="pj-btn" href="#contato">CONTATO</a>
            </div>
          </div>

          <div class="pj-in pj-d2">
            <div class="pj-photo">
              <span class="pj-orbit" aria-hidden="true"></span>
              <div class="pj-photo-frame">
                <!-- ↓↓↓ SUBSTITUA A URL ABAIXO PELA URL DA FOTO NA BIBLIOTECA DE MÍDIA DO WORDPRESS ↓↓↓ -->
                <img src="URL-DA-MINHA-FOTO" alt="Retrato profissional em fundo escuro" width="600" height="600" loading="lazy">
                <!-- ↑↑↑ SUBSTITUA A URL ACIMA ↑↑↑ -->
              </div>
              <span class="pj-chip">ADS • Web • Hardware</span>
            </div>
          </div>

        </div>

        <!-- MINI INDICADORES -->
        <div class="pj-indicators pj-in pj-d3">
          <div class="pj-ind"><strong>ADS</strong><span>Em andamento</span></div>
          <div class="pj-ind"><strong>Web</strong><span>HTML • CSS • JS</span></div>
          <div class="pj-ind"><strong>TI</strong><span>Hardware • Sistemas</span></div>
          <div class="pj-ind"><strong>IA</strong><span>Conhecimento complementar</span></div>
        </div>
      </div>
    </section>

    <!-- ================= SOBRE ================= -->
    <section class="pj-section" id="sobre">
      <div class="pj-wrap">
        <div class="pj-head">
          <span class="pj-mark" aria-hidden="true"></span>
          <h2>Sobre mim</h2>
          <p>Quem sou e o que venho construindo dentro da tecnologia.</p>
        </div>

        <div class="pj-about">
          <div class="pj-about-text">
            <p>Curso <strong>Análise e Desenvolvimento de Sistemas</strong> e venho desenvolvendo conhecimentos em desenvolvimento web, informática, hardware e sistemas operacionais. Consigo criar páginas e sites com HTML e CSS, além de trabalhar na prática com montagem, manutenção e configuração de computadores.</p>
            <p>Gosto de entender como as coisas funcionam — da estrutura de uma página até os componentes internos de um PC. O aprendizado contínuo é a parte que mais me motiva: cada curso, projeto ou problema resolvido vira conhecimento aplicado.</p>
          </div>

          <div class="pj-about-cards">
            <div class="pj-card">
              <h3>Formação atual</h3>
              <p>Análise e Desenvolvimento de Sistemas, em andamento.</p>
            </div>
            <div class="pj-card">
              <h3>Localização</h3>
              <p>Guará, Brasília – DF, Brasil.</p>
            </div>
            <div class="pj-card">
              <h3>Foco de estudo</h3>
              <p>Desenvolvimento web, sistemas e inteligência artificial.</p>
            </div>
            <div class="pj-card">
              <h3>Prática</h3>
              <p>Hardware, manutenção e suporte em informática.</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ================= CONHECIMENTOS ================= -->
    <section class="pj-section" id="conhecimentos">
      <div class="pj-wrap">
        <div class="pj-head">
          <span class="pj-mark" aria-hidden="true"></span>
          <h2>Meus conhecimentos</h2>
          <p>Áreas em que estudo e atuo na prática.</p>
        </div>

        <div class="pj-cols">
          <article class="pj-card">
            <div class="pj-skill-head">
              <span class="pj-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
              </span>
              <h3>Desenvolvimento web</h3>
            </div>
            <ul class="pj-list">
              <li>HTML</li>
              <li>CSS</li>
              <li>JavaScript</li>
            </ul>
          </article>

          <article class="pj-card">
            <div class="pj-skill-head">
              <span class="pj-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2"/></svg>
              </span>
              <h3>TI e hardware</h3>
            </div>
            <ul class="pj-list">
              <li>Hardware e componentes de PC</li>
              <li>Montagem de computadores</li>
              <li>Manutenção</li>
              <li>Sistemas operacionais</li>
              <li>Instalação e configuração</li>
              <li>Diagnóstico de problemas</li>
            </ul>
          </article>

          <article class="pj-card">
            <div class="pj-skill-head">
              <span class="pj-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a4 4 0 0 0-4 4v1a3 3 0 0 0 0 6v3a3 3 0 0 0 6 0V7a4 4 0 0 0-2-4Z"/><path d="M16 8a3 3 0 0 1 0 6"/><path d="M5 10H2M22 10h-3M5 15H2M22 15h-3"/></svg>
              </span>
              <h3>Ferramentas e conhecimentos</h3>
            </div>
            <ul class="pj-list">
              <li>Excel</li>
              <li>Informática</li>
              <li>Inteligência Artificial</li>
              <li>Datilografia</li>
            </ul>
          </article>
        </div>
      </div>
    </section>

    <!-- ================= O QUE POSSO FAZER ================= -->
    <section class="pj-section">
      <div class="pj-wrap">
        <div class="pj-head">
          <span class="pj-mark" aria-hidden="true"></span>
          <h2>O que eu posso fazer</h2>
          <p>Capacidades práticas que aplico hoje com o que já estudei.</p>
        </div>

        <div class="pj-cards-3">
          <article class="pj-card">
            <h3>Criação de páginas</h3>
            <p>Desenvolvimento de páginas utilizando HTML e CSS.</p>
          </article>
          <article class="pj-card">
            <h3>Desenvolvimento web</h3>
            <p>Criação de estruturas e interfaces para sites.</p>
          </article>
          <article class="pj-card">
            <h3>Hardware</h3>
            <p>Montagem, manutenção e diagnóstico de computadores.</p>
          </article>
          <article class="pj-card">
            <h3>Sistemas</h3>
            <p>Instalação e configuração de sistemas operacionais.</p>
          </article>
          <article class="pj-card">
            <h3>Informática</h3>
            <p>Conhecimentos gerais em tecnologia e informática.</p>
          </article>
          <article class="pj-card">
            <h3>Aprendizado contínuo</h3>
            <p>Estudo constante de novas ferramentas, linguagens e soluções de TI.</p>
          </article>
        </div>
      </div>
    </section>

    <!-- ================= PROJETOS ================= -->
    <section class="pj-section" id="projetos">
      <div class="pj-wrap">
        <div class="pj-head">
          <span class="pj-mark" aria-hidden="true"></span>
          <h2>Projetos</h2>
          <p>Espaço reservado para os trabalhos que estou desenvolvendo. Cada card abaixo é uma estrutura pronta: troque o texto, a imagem e os links.</p>
        </div>

        <div class="pj-cards-3">

          <!-- PROJETO 1 -->
          <article class="pj-card pj-project">
            <div class="pj-project-media">
              <!-- Para usar imagem: apague o <span> abaixo e descomente o <img>, trocando a URL -->
              <span class="pj-placeholder">URL-IMAGEM-PROJETO-1</span>
              <!-- <img src="URL-IMAGEM-PROJETO-1" alt="Captura de tela do projeto" loading="lazy"> -->
            </div>
            <div class="pj-project-body">
              <h3>Nome do projeto</h3>
              <p>Breve descrição do projeto: qual problema resolve e o que foi construído.</p>
              <div class="pj-stack"><span>HTML</span><span>CSS</span><span>JavaScript</span></div>
              <div class="pj-project-actions">
                <a class="pj-btn pj-btn--primary" href="#projetos">VER PROJETO</a>
                <a class="pj-btn" href="https://github.com/sancastro-x" target="_blank" rel="noopener">GITHUB</a>
              </div>
            </div>
          </article>

          <!-- PROJETO 2 -->
          <article class="pj-card pj-project">
            <div class="pj-project-media">
              <span class="pj-placeholder">URL-IMAGEM-PROJETO-2</span>
              <!-- <img src="URL-IMAGEM-PROJETO-2" alt="Captura de tela do projeto" loading="lazy"> -->
            </div>
            <div class="pj-project-body">
              <h3>Nome do projeto</h3>
              <p>Breve descrição do projeto: qual problema resolve e o que foi construído.</p>
              <div class="pj-stack"><span>HTML</span><span>CSS</span></div>
              <div class="pj-project-actions">
                <a class="pj-btn pj-btn--primary" href="#projetos">VER PROJETO</a>
                <a class="pj-btn" href="https://github.com/sancastro-x" target="_blank" rel="noopener">GITHUB</a>
              </div>
            </div>
          </article>

          <!-- PROJETO 3 -->
          <article class="pj-card pj-project">
            <div class="pj-project-media">
              <span class="pj-placeholder">URL-IMAGEM-PROJETO-3</span>
              <!-- <img src="URL-IMAGEM-PROJETO-3" alt="Captura de tela do projeto" loading="lazy"> -->
            </div>
            <div class="pj-project-body">
              <h3>Nome do projeto</h3>
              <p>Breve descrição do projeto: qual problema resolve e o que foi construído.</p>
              <div class="pj-stack"><span>HTML</span><span>CSS</span><span>JavaScript</span></div>
              <div class="pj-project-actions">
                <a class="pj-btn pj-btn--primary" href="#projetos">VER PROJETO</a>
                <a class="pj-btn" href="https://github.com/sancastro-x" target="_blank" rel="noopener">GITHUB</a>
              </div>
            </div>
          </article>

        </div>
      </div>
    </section>

    <!-- ================= GITHUB ================= -->
    <section class="pj-section">
      <div class="pj-wrap">
        <div class="pj-github">
          <div>
            <span class="pj-github-mark" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5A11.5 11.5 0 0 0 .5 12a11.5 11.5 0 0 0 7.86 10.92c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.53-1.34-1.29-1.7-1.29-1.7-1.06-.72.08-.71.08-.71 1.17.08 1.78 1.2 1.78 1.2 1.04 1.79 2.74 1.27 3.41.97.1-.76.4-1.28.73-1.57-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.8 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.24 2.76.12 3.05.74.81 1.18 1.84 1.18 3.1 0 4.43-2.69 5.4-5.25 5.69.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56A11.5 11.5 0 0 0 23.5 12 11.5 11.5 0 0 0 12 .5Z"/></svg>
            </span>
            <h2>GitHub</h2>
            <p>Confira meus projetos e meu desenvolvimento na programação.</p>
          </div>
          <div>
            <a class="pj-btn pj-btn--primary" href="https://github.com/sancastro-x" target="_blank" rel="noopener">VER GITHUB</a>
          </div>
        </div>
      </div>
    </section>

    <!-- ================= FORMAÇÃO ================= -->
    <section class="pj-section" id="formacao">
      <div class="pj-wrap">
        <div class="pj-head">
          <span class="pj-mark" aria-hidden="true"></span>
          <h2>Minha formação</h2>
          <p>Trajetória acadêmica e próximos passos.</p>
        </div>

        <div class="pj-timeline">
          <article class="pj-card pj-tl-item">
            <span class="pj-status"><span class="pj-dot" aria-hidden="true"></span>Em andamento</span>
            <h3>Análise e Desenvolvimento de Sistemas</h3>
            <p>Graduação em curso, com foco em desenvolvimento, sistemas e infraestrutura de TI.</p>
          </article>

          <article class="pj-card pj-tl-item pj-tl-item--next">
            <span class="pj-status">Próximos passos</span>
            <h3>Novas formações e certificações</h3>
            <p>Espaço reservado para registrar futuras graduações, especializações e certificações.</p>
          </article>
        </div>
      </div>
    </section>

    <!-- ================= CURSOS COMPLEMENTARES ================= -->
    <section class="pj-section">
      <div class="pj-wrap">
        <div class="pj-head">
          <span class="pj-mark" aria-hidden="true"></span>
          <h2>Cursos complementares</h2>
          <p>Conhecimentos complementares que somam à minha formação principal.</p>
        </div>

        <div class="pj-courses">
          <article class="pj-course"><h3>Inteligência Artificial</h3><span>Curso complementar</span></article>
          <article class="pj-course"><h3>Excel</h3><span>Curso complementar</span></article>
          <article class="pj-course"><h3>Informática</h3><span>Curso complementar</span></article>
          <article class="pj-course"><h3>Datilografia</h3><span>Curso complementar</span></article>
          <article class="pj-course"><h3>Relações Humanas</h3><span>Curso complementar</span></article>
          <!-- Duplique o bloco abaixo para adicionar novos cursos -->
          <article class="pj-course pj-course--open"><h3>Novo curso</h3><span>Espaço para inclusão</span></article>
        </div>
      </div>
    </section>

    <!-- ================= TECNOLOGIAS ================= -->
    <section class="pj-section">
      <div class="pj-wrap">
        <div class="pj-head">
          <span class="pj-mark" aria-hidden="true"></span>
          <h2>Tecnologias e ferramentas</h2>
          <p>O que utilizo e estudo no dia a dia.</p>
        </div>

        <div class="pj-badges">
          <span class="pj-badge">HTML</span>
          <span class="pj-badge">CSS</span>
          <span class="pj-badge">JavaScript</span>
          <span class="pj-badge pj-badge--soft">Hardware</span>
          <span class="pj-badge pj-badge--soft">Windows</span>
          <span class="pj-badge pj-badge--soft">Informática</span>
          <span class="pj-badge pj-badge--soft">Excel</span>
          <span class="pj-badge pj-badge--soft">Inteligência Artificial</span>
        </div>
      </div>
    </section>

    <!-- ================= CONTATO ================= -->
    <section class="pj-section pj-contact" id="contato">
      <span class="pj-grid-bg" aria-hidden="true"></span>
      <div class="pj-wrap">
        <div class="pj-head">
          <span class="pj-mark" aria-hidden="true"></span>
          <h2>Vamos conversar?</h2>
        </div>
        <p class="pj-lead">Estou aberto a oportunidades, projetos e trocas sobre tecnologia. Escolha o canal que preferir — respondo o quanto antes.</p>

        <div class="pj-contact-grid">
          <a class="pj-contact-item" href="mailto:jussanrley@gmail.com">
            <span class="pj-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg>
            </span>
            <span><strong>jussanrley@gmail.com</strong><span>E-mail</span></span>
          </a>

          <a class="pj-contact-item" href="https://wa.me/556182401897" target="_blank" rel="noopener">
            <span class="pj-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2a9.93 9.93 0 0 0-8.5 15.06L2 22l5.07-1.5A9.93 9.93 0 1 0 12.04 2Zm0 1.8a8.13 8.13 0 1 1-4.13 15.13l-.3-.18-3 .89.9-2.92-.2-.31A8.13 8.13 0 0 1 12.04 3.8Zm4.68 10.3c-.25-.13-1.47-.73-1.7-.81-.23-.09-.4-.13-.56.12s-.64.8-.79.97c-.14.17-.29.19-.54.06a6.65 6.65 0 0 1-3.32-2.9c-.25-.43.25-.4.71-1.32.08-.17.04-.31-.02-.44-.06-.12-.56-1.35-.77-1.85-.2-.48-.41-.41-.56-.42h-.48c-.17 0-.44.06-.67.31-.23.25-.87.85-.87 2.08s.9 2.41 1.02 2.58c.13.17 1.76 2.7 4.28 3.78 1.6.69 2.22.75 3.02.63.49-.07 1.47-.6 1.68-1.19.2-.58.2-1.08.14-1.19-.06-.11-.22-.17-.47-.3Z"/></svg>
            </span>
            <span><strong>+55 61 8240-1897</strong><span>WhatsApp</span></span>
          </a>

          <a class="pj-contact-item" href="https://www.linkedin.com/in/juss%C3%A2n-castro-5ab22840b/" target="_blank" rel="noopener">
            <span class="pj-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5A2.5 2.5 0 1 1 0 3.5a2.5 2.5 0 0 1 4.98 0ZM.25 8.25h4.5V24H.25V8.25Zm7.5 0h4.31v2.15h.06c.6-1.13 2.07-2.32 4.26-2.32 4.56 0 5.4 2.99 5.4 6.88V24h-4.5v-7.98c0-1.9-.03-4.35-2.65-4.35-2.66 0-3.07 2.07-3.07 4.21V24h-4.5V8.25Z"/></svg>
            </span>
            <span><strong>Perfil no LinkedIn</strong><span>Rede profissional</span></span>
          </a>

          <a class="pj-contact-item" href="https://github.com/sancastro-x" target="_blank" rel="noopener">
            <span class="pj-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5A11.5 11.5 0 0 0 .5 12a11.5 11.5 0 0 0 7.86 10.92c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.53-1.34-1.29-1.7-1.29-1.7-1.06-.72.08-.71.08-.71 1.17.08 1.78 1.2 1.78 1.2 1.04 1.79 2.74 1.27 3.41.97.1-.76.4-1.28.73-1.57-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.8 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.24 2.76.12 3.05.74.81 1.18 1.84 1.18 3.1 0 4.43-2.69 5.4-5.25 5.69.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56A11.5 11.5 0 0 0 23.5 12 11.5 11.5 0 0 0 12 .5Z"/></svg>
            </span>
            <span><strong>Perfil no GitHub</strong><span>Código e projetos</span></span>
          </a>

          <a class="pj-contact-item" href="https://instagram.com/jussanrl" target="_blank" rel="noopener">
            <span class="pj-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="2.5" width="19" height="19" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.1" fill="currentColor" stroke="none"/></svg>
            </span>
            <span><strong>@jussanrl</strong><span>Instagram</span></span>
          </a>

          <div class="pj-contact-item">
            <span class="pj-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z"/><circle cx="12" cy="10" r="2.6"/></svg>
            </span>
            <span><strong>Guará, Brasília – DF</strong><span>Localização</span></span>
          </div>
        </div>

        <div class="pj-actions">
          <a class="pj-btn pj-btn--primary" href="https://wa.me/556182401897" target="_blank" rel="noopener">FALAR NO WHATSAPP</a>
          <a class="pj-btn" href="mailto:jussanrley@gmail.com">ENVIAR E-MAIL</a>
        </div>
      </div>
    </section>

  </main>

  <!-- ================= FOOTER ================= -->
  <footer class="pj-wrap pj-footer">
    <p>Portfólio pessoal • Tecnologia da Informação e Desenvolvimento Web</p>
    <div class="pj-footer-links">
      <a href="https://github.com/sancastro-x" target="_blank" rel="noopener" aria-label="GitHub">
        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5A11.5 11.5 0 0 0 .5 12a11.5 11.5 0 0 0 7.86 10.92c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.53-1.34-1.29-1.7-1.29-1.7-1.06-.72.08-.71.08-.71 1.17.08 1.78 1.2 1.78 1.2 1.04 1.79 2.74 1.27 3.41.97.1-.76.4-1.28.73-1.57-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.8 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.24 2.76.12 3.05.74.81 1.18 1.84 1.18 3.1 0 4.43-2.69 5.4-5.25 5.69.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56A11.5 11.5 0 0 0 23.5 12 11.5 11.5 0 0 0 12 .5Z"/></svg>
      </a>
      <a href="https://www.linkedin.com/in/juss%C3%A2n-castro-5ab22840b/" target="_blank" rel="noopener" aria-label="LinkedIn">
        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M4.98 3.5A2.5 2.5 0 1 1 0 3.5a2.5 2.5 0 0 1 4.98 0ZM.25 8.25h4.5V24H.25V8.25Zm7.5 0h4.31v2.15h.06c.6-1.13 2.07-2.32 4.26-2.32 4.56 0 5.4 2.99 5.4 6.88V24h-4.5v-7.98c0-1.9-.03-4.35-2.65-4.35-2.66 0-3.07 2.07-3.07 4.21V24h-4.5V8.25Z"/></svg>
      </a>
      <a href="https://instagram.com/jussanrl" target="_blank" rel="noopener" aria-label="Instagram">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="2.5" y="2.5" width="19" height="19" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.1" fill="currentColor" stroke="none"/></svg>
      </a>
      <a href="mailto:jussanrley@gmail.com" aria-label="E-mail">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg>
      </a>
    </div>
  </footer>

</div>/* End custom CSS */