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

html,body{
font-family: Ubuntu, Arial;
width: 100%;
height: 100%;
scroll-behavior: smooth;
}

#header{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a2e 100%);
    overflow-y: auto;
    width: 300px;
    transition: all ease-in-out 0.5s;
    padding: 30px 20px 20px;
    z-index: 9997;
    display: flex;
    flex-direction: column;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
}

/* Partículas de fundo */
.sidebar-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.05;
    background-image: radial-gradient(circle, #667eea 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

/* Profile section melhorado */
.profile {
    text-align: center;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-img-container {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto 20px;
}

.profile-img-border {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

#header .profile img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #0a0a0a;
}

.status-indicator {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background: #00ff00;
    border-radius: 50%;
    border: 3px solid #0a0a0a;
    animation: pulse-status 2s infinite;
}

@keyframes pulse-status {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
    }
}

.profile-name {
    font-size: 26px;
    margin: 0 0 5px;
    padding: 0;
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.profile-role {
    color: #667eea;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Social links modernizados */
.social-links {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.social-link {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 18px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-link:hover {
    transform: translateY(-5px);
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.2);
}

.social-link.linkedin:hover {
    background: #0077b5;
    border-color: #0077b5;
    box-shadow: 0 5px 15px rgba(0, 119, 181, 0.5);
}

.social-link.github:hover {
    background: #333;
    border-color: #333;
    box-shadow: 0 5px 15px rgba(51, 51, 51, 0.5);
}

.social-link.email:hover {
    background: #ea4335;
    border-color: #ea4335;
    box-shadow: 0 5px 15px rgba(234, 67, 53, 0.5);
}

.social-link.whatsapp:hover {
    background: #25d366;
    border-color: #25d366;
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.5);
}

/* Tooltip para social links */
.social-link::before {
    content: attr(data-tooltip);
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    transition: transform 0.3s ease;
    pointer-events: none;
}

.social-link:hover::before {
    transform: translateX(-50%) scale(1);
}

/* Menu de navegação modernizado */
.nav-menu {
    flex: 1;
    padding: 30px 0;
}

.nav-menu .nav {
    gap: 5px;
}

.nav-menu .nav-item {
    margin: 5px 0;
}

.nav-menu .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
}

.nav-menu .nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.2), transparent);
    transition: left 0.5s ease;
}

.nav-menu .nav-link:hover::before {
    left: 100%;
}

.nav-icon {
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 20px;
    color: #667eea;
}

.nav-text {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.nav-indicator {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    transition: height 0.3s ease;
    border-radius: 3px;
}

.nav-menu .nav-link:hover {
    color: #fff;
    background: rgba(102, 126, 234, 0.1);
    transform: translateX(5px);
}

.nav-menu .nav-link:hover .nav-icon {
    color: #fff;
    animation: iconPulse 0.5s ease;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.nav-menu .nav-link.active {
    color: #fff;
    background: rgba(102, 126, 234, 0.2);
}

.nav-menu .nav-link.active .nav-icon {
    color: #fff;
}

.nav-menu .nav-link.active .nav-indicator {
    height: 30px;
}

/* Footer do sidebar */
.sidebar-footer {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.copyright {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    margin: 0 0 10px;
}

.status-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin: 0;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: #00ff00;
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}
#main{
    margin-left: 300px;

}
.nav-pills{
 margin-left: 10px;
}

section#inicio{
    background: linear-gradient(135deg, #000000 0%, #1a0033 50%, #000000 100%);
    background-attachment: fixed;
    width: 100%;
    /* height + overflow:hidden clipped the CTAs on a short laptop or a phone in
       landscape, with no way to scroll to them. svh also accounts for the
       mobile URL bar, which vh does not. */
    min-height: 100svh;
    position: relative;
}

section#inicio h2{
font-size: 6rem;
}

section#inicio span#subtitle{
margin-right: 8rem;
font-size: 1.5rem;
}
.text-shadow{
text-shadow:  4px 4px 10px black;

}
/* (bloco #arraste removido: o terceiro CTA colidia com os dois reais) */

i.menu-mobile{
 position: fixed;
color: #fff;
background-color: #6959CD;
 right: 1rem;
 top:1rem;
font-size: 1.5rem;
border-radius: 4rem;
cursor: pointer;
z-index: 10;
height: 45px;
width: 45px;
display: none;
justify-content: center;
align-items: center;

}
.menu-nav-active{
    overflow: hidden;
}

.menu-nav-active #header{
left: 0;
}

/* (removida a regra global .row img que forcava 300px x 40vh em toda imagem) */



@media (max-width:1024px){
#header{
left: -300px;
}

i.menu-mobile{
    display: flex;
}
section#inicio h2{
    font-size: 3.5rem;
}

section#inicio span#subtitle {
    margin-right: 0;
    font-size: 1rem;
}
#main{
margin-left: 0;

}

}
.mt-1 {
    margin-top: 1.25rem !important;
}

.h-75 {
    height: 95% !important;
}

/* Efeito do scroll */
*::-webkit-scrollbar{
    width: 10px;
}
*::-webkit-scrollbar-track{
    width: 12px;
    box-shadow: inset 0 0 .3rem black;
    background-color: #fff;
}
*::-webkit-scrollbar-thumb{
    background: black;

}
.section-bg{
    background-color: #B0C4DE;
}
.cv .cv-title{
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #000;

}

.cv .cv-item {

    padding: 0 0 20px 20px;
    margin-top: -2px;
    border-left: 2px solid #B0C4DE;
    position: relative
}

.cv .cv-item h4{

    line-height: 40px;
font-weight: 600;
text-transform: uppercase;
font-family: "Poppins" , sans-serif;
color: black;
margin-bottom: 10px;

}
.cv .cv-item h5{
    background-color: whitesmoke;
    padding: 5px 15px;
 display: inline-block;
 font-weight: 600;
 margin-bottom: 10px ;

}
.cv .cv-item::before{
content: "";
position: absolute;
top: 0;
width: 16px;
height: 16px;
border: 2px solid #6959CD;
background-color: aliceblue;
left: -9px;
border-radius: 50%;

}

#carouselPortfolio >  div.carousel-inner > div.carousel-item > .row >.col >.card:hover,
#carouselPortfolio >  div.carousel-item > div.carousel-item  >.row >.col >#empat > div:hover  {
    cursor: pointer;
    background-color: #baadeb !important;
    border: 1px solid #a595e2;
    color: white;
}
#carouselPortfolio >  div.carousel-inner > div.carousel-item > .row >.col:nth-child(2) >.card:hover {
background-color: rgb(231, 122, 177) !important;
}
#carouselPortfolio >  div.carousel-inner > div.carousel-item > .row >.col:nth-child(3) >.card:hover,
#carouselPortfolio >  div.carousel-inner > div.carousel-item > .row >.col > .card-login:hover {
    background-color:  #65c368!important;
    color: #fff !important;
    }
#carouselPortfolio >  div.carousel-inner > div.carousel-item > .row >.col:nth-child(4) >.card:hover {
    background-color:  #292929 !important;
    color: #fa7f72 !important;
    }
#carouselPortfolio >  div.carousel-inner > div.carousel-item > .row >.col:nth-child(5) >.card:hover {
    background-color:  #292929!important;
    color: #fbec5d !important;
    }
#carouselPortfolio >  div.carousel-inner > div.carousel-item > .row >.col:nth-child(6) >.card:hover {
    background-color:  #292929!important;
    color: #65c368 !important;
    }

    .row >.col >.card >a.btn:hover{
        background-color:red !important;
    }

.carousel-control-prev{
    margin-left: -8rem;
  }
  
  .carousel-control-next{
    margin-right: -8rem;
  }
  
  .carousel-indicators{
    margin-bottom: -35px;
  }
  
  /* Animação */
  
  [data-anime] {
    opacity: 0;
    transition: 1s;
  }
  
  [data-anime="down"] {
    transform: translate3d(0, -100%, 0);
  }
  
  [data-anime="up"] {
    transform: translate3d(0, 100%, 0);
  }
  
  [data-anime="left"] {
    transform: translate3d(-100%, 0, 0);
  }
  
  [data-anime="right"] {
    transform: translate3d(50px ,0 ,0);
  }
  
  [data-anime].animate {
    opacity: 1;
    transform: translate3d(0 ,0 ,0);
  }

  /* Melhorias no layout */
  .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
  }

  /* Melhorar botões */
  .btn {
    transition: all 0.3s ease;
    font-weight: 500;
  }

  .btn:hover {
    transform: scale(1.05);
  }

  /* Badges modernos */
  .badge {
    padding: 0.5em 0.75em;
    font-weight: 500;
  }

  /* Progress bars animadas */
  .progress-bar {
    animation: progressAnimation 2s ease-in-out;
  }

  @keyframes progressAnimation {
    0% {
      width: 0%;
    }
  }

  /* Seção de habilidades melhorada */
  .progress {
    height: 1.5rem;
    background-color: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
  }

  .progress-bar {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  }


  /* Melhorar cards do portfólio */
  #portfolio .card {
    border-radius: 15px;
    overflow: hidden;
  }

  #portfolio .card img {
    transition: transform 0.5s ease;
  }

  #portfolio .card:hover img {
    transform: scale(1.1);
  }

  /* Seção sobre melhorada */
  #sobre img {
    border-radius: 15px;
  }

  /* Formulário de contato melhorado */
  .form-control {
    border-radius: 10px;
    border: 2px solid #e9ecef;
    transition: border-color 0.3s ease;
  }

  .form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
  }

  /* Títulos de seção */
  h2 {
    position: relative;
    padding-bottom: 1rem;
  }

  h2:not(.section-title):after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  }

  .section-title:after,
  #inicio h2:after {
    content: none;
  }


  /* CV items melhorados */
  .cv .cv-item {
    transition: transform 0.3s ease;
  }

  .cv .cv-item:hover {
    transform: translateX(10px);
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Gap utility */
  .gap-3 {
    gap: 1rem;
  }

  /* Animações da seção hero */
  
  /* Código flutuante no fundo */
  /* The decorative layers keep the clipping the section gave up, so the
     floating code cannot widen the page. */
  .code-background {
    pointer-events: none;
    overflow: hidden;
  }
  
  .floating-code {
    position: absolute;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 14px;
    opacity: 0.1;
    color: #00ffff;
    white-space: pre;
    animation: float 20s infinite ease-in-out;
  }
  
  #code1 {
    top: 10%;
    left: 5%;
    animation-delay: 0s;
  }
  
  #code2 {
    top: 50%;
    right: 10%;
    animation-delay: 5s;
  }
  
  #code3 {
    bottom: 20%;
    left: 15%;
    animation-delay: 10s;
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0) translateX(0);
    }
    25% {
      transform: translateY(-20px) translateX(10px);
    }
    50% {
      transform: translateY(10px) translateX(-10px);
    }
    75% {
      transform: translateY(-10px) translateX(5px);
    }
  }
  
  /* Syntax highlighting */
  .keyword {
    color: #ff0080;
    text-shadow: 0 0 10px #ff0080;
  }
  
  .variable {
    color: #00ffff;
    text-shadow: 0 0 10px #00ffff;
  }
  
  .string {
    color: #ffff00;
    text-shadow: 0 0 10px #ffff00;
  }
  
  .function {
    color: #00ff00;
    text-shadow: 0 0 10px #00ff00;
  }
  
  .property {
    color: #ff00ff;
    text-shadow: 0 0 10px #ff00ff;
  }
  
  /* Efeito de digitação */
  .typing-container {
    height: 40px;
  }
  
  .cursor {
    animation: blink 1s infinite;
  }
  
  @keyframes blink {
    0%, 50% {
      opacity: 1;
    }
    51%, 100% {
      opacity: 0;
    }
  }
  
  /* Tags de tecnologia */
  .tech-tags {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .tech-tag {
    padding: 8px 20px;
    background: rgba(102, 126, 234, 0.2);
    border: 2px solid #667eea;
    border-radius: 25px;
    color: #fff;
    font-weight: 500;
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: var(--delay);
    opacity: 0;
    transition: all 0.3s ease;
  }
  
  .tech-tag:hover {
    background: rgba(102, 126, 234, 0.4);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
  }
  
  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
    from {
      opacity: 0;
      transform: translateY(20px);
    }
  }
  
  /* Animação de bounce para seta */
  .bounce-animation {
    animation: bounce 2s infinite;
  }
  
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-10px);
    }
    60% {
      transform: translateY(-5px);
    }
  }
  
  /* Canvas de partículas */
  #particles-canvas {
    pointer-events: none;
    inset: 0;
  }

  /* Seção About melhorada */
  .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
  }

  .section-divider {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
    margin-bottom: 20px;
  }

  .section-subtitle {
    color: #666;
    font-size: 1.1rem;
  }

  .about-img-container {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    margin: 0 auto;
  }

  .about-img-container img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
  }

  .about-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 30px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .about-img-container:hover .about-img-overlay {
    transform: translateY(0);
  }

  .overlay-content h4 {
    color: #fff;
    margin: 0;
    font-size: 1.5rem;
  }

  .overlay-content p {
    color: #ddd;
    margin: 5px 0 0;
  }

  .gradient-text {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .about-description {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
  }

  .tech-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }

  .tech-item {
    padding: 10px 20px;
    background: rgba(102, 126, 234, 0.1);
    border: 2px solid #667eea;
    border-radius: 25px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .tech-item:hover {
    background: #667eea;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
  }

  .personal-info {
    margin-top: 30px;
  }

  .info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
  }

  .info-item i {
    font-size: 1.3rem;
    color: #667eea;
    width: 30px;
  }

  .info-item strong {
    color: #333;
    margin-right: 10px;
  }

  .status-available {
    color: #00c851;
    font-weight: 600;
  }

  .btn-gradient {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
  }

  .btn-gradient:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    color: #fff;
  }

  .btn-outline-gradient {
    background: transparent;
    color: #667eea;
    border: 2px solid #667eea;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin-left: 15px;
  }

  .btn-outline-gradient:hover {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
  }

  /* Timeline do Currículo */
  .timeline {
    position: relative;
    padding: 20px 0;
  }

  .timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  }

  .timeline-item {
    margin-bottom: 50px;
    position: relative;
  }

  .timeline-item:nth-child(odd) {
    padding-right: calc(50% + 30px);
    text-align: right;
  }

  .timeline-item:nth-child(even) {
    padding-left: calc(50% + 30px);
  }

  .timeline-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #fff;
    border: 4px solid #667eea;
    border-radius: 50%;
    z-index: 1;
  }

  .timeline-content {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  .timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  }

  .timeline-date {
    display: inline-block;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-bottom: 10px;
  }

  /* Seção de contato melhorada */
  .contact-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  .contact-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
  }

  .contact-info-item {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
  }

  .contact-info-item i {
    font-size: 1.5rem;
    color: #667eea;
    margin-right: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 10px;
  }

  .form-control, .form-select, textarea {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 12px 20px;
    transition: all 0.3s ease;
  }

  .form-control:focus, .form-select:focus, textarea:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
  }

  /* Responsividade melhorada */
  @media (max-width: 1024px) {
    .timeline::before {
      left: 30px;
    }
    
    .timeline-item {
      padding-left: 80px !important;
      padding-right: 0 !important;
      text-align: left !important;
    }
    
    .timeline-dot {
      left: 30px;
    }
  }

  

/* Grouped technology lists (Skills section) */
.tech-list li {
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.95rem;
}
.tech-list li:last-child {
  border-bottom: none;
}

/* ==========================================================================
   Applied-AI positioning pass
   ========================================================================== */

/* Keyboard access ---------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: #0a0a0a;
  color: #fff;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid #667eea;
  outline-offset: 3px;
  border-radius: 4px;
}
#header :focus-visible,
.featured-card :focus-visible,
#inicio :focus-visible {
  outline-color: #fff;
}
section:focus,
section:focus-visible {
  outline: none;
}

/* The hamburger is a real <button> now, not an <i>. */
button.menu-mobile {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 9998;
  height: 46px;
  width: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #6959CD;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
@media (max-width: 1024px) {
  button.menu-mobile { display: flex; }
}

/* Hero --------------------------------------------------------------------- */

.hero-tagline {
  max-width: 48ch;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.6;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.hero-cta .btn-outline-gradient,
.hero-cta .ms-3 { margin-left: 0 !important; }

@media (max-width: 575px) {
  section#inicio h2 { font-size: 2.6rem; }
  .hero-cta .btn { width: 100%; }
}

/* #subtitle had an 8rem right margin that pushed it off the hero's centre. */
section#inicio span#subtitle { margin-right: 0; }

/* Skills proficiency tiers ------------------------------------------------- */

.tech-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.lvl {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}
.lvl-1 { background: #2f3f8f; color: #fff; }
.lvl-2 { background: #dfe4fb; color: #2f3f8f; }
.lvl-3 { background: #e9ecef; color: #495057; }

/* Project cards ------------------------------------------------------------ */

.section-lead {
  max-width: 68ch;
  margin-bottom: 2.5rem;
  color: #2a3140;
  font-size: 1.05rem;
}

.card-thumb {
  height: 120px;
  font-size: 3rem;
}
.project-card .card-meta { color: #5a6475; }
.project-card .card-text { color: #2a3140; line-height: 1.65; }
.project-card .card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.project-card .badge.text-bg-light {
  font-weight: 500;
  color: #2a3140 !important;
}

.featured-card {
  background: linear-gradient(135deg, #5a67d8 0%, #764ba2 100%);
}
.featured-visual {
  background: rgba(0, 0, 0, 0.18);
  min-height: 260px;
  text-align: center;
}
.featured-icon { font-size: 5rem; opacity: 0.9; }
.featured-visual-label {
  font-size: 0.85rem;
  opacity: 0.85;
  max-width: 24ch;
}
.featured-role { color: rgba(255, 255, 255, 0.85); }
.featured-card .card-text { line-height: 1.7; }

/* Contact ------------------------------------------------------------------ */

.contact-info-card,
.contact-form-card {
  background: #fff;
  border-radius: 18px;
  padding: 2.5rem;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
  height: 100%;
}
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.contact-item:last-child { margin-bottom: 0; }
.contact-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(102, 126, 234, 0.12);
  color: #4c5fd7;
  font-size: 1.2rem;
}
.contact-details h5 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 2px;
  color: #2a3140;
}
.contact-details p { margin: 0; color: #5a6475; }
.contact-details a { color: #4c5fd7; }

.form-group { margin-bottom: 0; }
.form-label { font-weight: 600; color: #2a3140; margin-bottom: 0.4rem; }

.social-links-horizontal {
  display: flex;
  gap: 12px;
  justify-content: center;
}
/* The sidebar .social-link is white-on-dark; on a white card it needs inverting. */
.social-link--light {
  background: rgba(102, 126, 234, 0.1);
  border-color: rgba(102, 126, 234, 0.35);
  color: #4c5fd7;
}
.social-link--light:hover { color: #fff; }

/* Direct-contact fallback -------------------------------------------------- */

/* The form posts to a third-party endpoint. Until its id is set, a form that
   silently drops messages is worse than no form, so the page swaps in the
   address itself rather than pretending to send. */
.contact-direct { display: grid; gap: 1rem; }
.contact-direct p { color: #5a6475; margin: 0; }
.contact-direct .addr {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  background: rgba(102, 126, 234, 0.08);
  border: 1px solid rgba(102, 126, 234, 0.3);
  border-radius: 10px; padding: 1rem 1.15rem;
}
.contact-direct .addr code {
  font-size: 1rem; color: #2a3140; background: none; padding: 0;
  overflow-wrap: anywhere; font-family: ui-monospace, Menlo, monospace;
}
.contact-direct .addr button {
  margin-left: auto; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  background: #4c5fd7; color: #fff; border: none; border-radius: 8px; padding: 0.5rem 1rem;
}
.contact-direct .addr button:hover { filter: brightness(1.08); }

/* Language switcher -------------------------------------------------------- */

.nav-pills { margin-left: 0; }
#pills-tab {
  gap: 0.5rem;
  padding: 1.25rem 1.5rem 0;
}

/* Reduced motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .floating-code,
  #particles-canvas { display: none; }
  [data-anime] { opacity: 1; transform: none; }
}

/* Long unbreakable strings (emails, URLs) must not push the layout wider than
   the viewport. .info-item is a flex row, so its text child needs min-width: 0
   before overflow-wrap can take effect. */
.info-item > div,
.contact-details {
  min-width: 0;
}
.info-item span,
.contact-details p,
.contact-details a {
  overflow-wrap: anywhere;
}

/* The photo caption and the contact labels were marked up as headings for their
   size, which made the document outline skip levels on a page that advertises
   WCAG work. They are now a paragraph and h3s, styled to look the same. */
.overlay-name { color: #fff; margin: 0; font-size: 1.5rem; font-weight: 600; }
.contact-details .contact-label {
  font-size: 0.95rem; font-weight: 700; margin: 0 0 2px; color: #2a3140;
}
.contact-details .contact-label:after { content: none; }

/* The featured card split in two at the lg breakpoint, which is measured on
   the viewport — but the fixed sidebar takes 300px of it, so at 1034px the
   text column came out 254px wide and wrapped at 32 characters. Running text
   wants roughly 65. Splitting at xl leaves enough room on both sides. */
.featured-card .card-text { max-width: 68ch; }

/* WCAG 1.4.4 (Resize Text, AA): at 200% text size the two long status badges
   kept `white-space: nowrap` and pushed the page into horizontal scrolling,
   which the criterion forbids. Short badges still read better on one line, so
   only the ones that carry a sentence are allowed to wrap. */
.badge {
  white-space: normal;
  text-align: left;
}
.card-actions .badge,
.featured-card .badge {
  max-width: 100%;
  overflow-wrap: anywhere;
}