/* Ajuste global do scroll dos links do menu.
   Mantem Home, Sobre, Habilidades, Portfolio e demais secoes parando justo no inicio. */
html {
  scroll-padding-top: 0;
}

#header,
#sobre,
#skills,
#dispositivos,
#portfolio,
#projeto,
#certificados,
#trajetoria-profissional,
#videos,
#formulario,
#whatsapp-comments,
#mapa-portfolio,
#cadastro-usuario,
#login-usuario {
  scroll-margin-top: 0 !important;
}

/* Ajustes finais exclusivos para mobile/responsivo */
@media only screen and (max-width: 768px) {
  /* No mobile o topo fixo e menor, entao o scroll precisa de menos compensacao. */
  html {
    scroll-padding-top: 9.5rem;
  }

  #header,
  #sobre,
  #skills,
  #dispositivos,
  #portfolio,
  #projeto,
  #certificados,
  #trajetoria-profissional,
  #videos,
  #formulario,
  #whatsapp-comments,
  #mapa-portfolio,
  #cadastro-usuario,
  #login-usuario {
    scroll-margin-top: 9.5rem !important;
  }

  /* Remove no mobile apenas os tracos coloridos acima dos titulos. */
  .skills .skills__content .tertiary-title::before,
  .skillsms h2.titulo-section::before,
  .portfolio h2.titulo-section::before,
  .projeto .projeto__content h2::before {
    content: none !important;
    display: none !important;
  }

  /* Topo-banner mobile: usa arte propria para centralizar nome, contato e e-mail */
  section.topo-banner {
    height: 300px;
    background-color: #050065;
    background-image: url('../../_img/msc-portfolio-resposivo-04-mobile-ajustado.webp?v=20260730e');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin: 0 0 18px 0;
    border-radius: 0;
    overflow: hidden;
  }

  /* Banner do slider: mantém a imagem inteira visível e com respiro lateral */
  section.slider {
    width: calc(100% - 24px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #050065;
    border-radius: 12px;
  }

  /* Remove os 80px reservados no desktop que formavam a faixa azul vazia. */
  section.slider .slider-content {
    height: auto;
    margin-bottom: 0 !important;
    align-items: flex-start;
  }

  /* Fundo do slide acompanha o azul do banner quando a imagem é reduzida */
  section.slider .slide-box {
    background: #050065;
  }

  /* Imagem mobile centralizada para telefone e e-mail não encostarem nas laterais */
  section.slider .slide-box .img-mobile {
    display: block !important;
    width: 92% !important;
    max-width: 92% !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain;
    border-radius: 12px;
    vertical-align: middle;
  }

  /* Botao da secao Especialidades: .btn-contato e .btn-link-contato no mobile */
  section.skillsms {
    padding-bottom: 3rem !important;
  }

  section.skillsms article {
    margin-bottom: 0 !important;
  }

  section.skillsms .btn-contato {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    margin: 5.4rem auto 0 auto !important;
    padding: 0 !important;
  }

  section.skillsms .btn-contato .btn-link-contato,
  section.skillsms .btn-contato button {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 1.45rem !important;
  }

  /* Aproxima a secao seguinte sem alterar a posicao do botao de contato. */
  section.portfolio {
    position: relative;
    z-index: 2;
    margin-top: -7rem !important;
  }

  /* Botao Mostrar mais: centralizado no espaco entre o ultimo card e a proxima secao. */
  section.portfolio .btn-mostra-mais {
    width: calc(100% - 24px) !important;
    max-width: 420px !important;
    margin: 0.2rem auto 0 auto !important;
    transform: translateY(-2rem);
  }

  section.portfolio .btn-mostra-mais button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Newsletter do footer: campo e botao ocupam a largura mobile com respiro lateral. */
  footer .line-footer1 form {
    width: 100% !important;
  }

  footer .line-footer1 form input[type="text"],
  footer .line-footer1 form input[type="email"],
  footer .line-footer1 form input[type="submit"] {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /* Formulario Redes Sociais: card usa toda a largura disponivel no mobile. */
  footer .footer-col .form-sub {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /* Centraliza no mobile a arte e o texto do banner Formulario de Contato. */
  section.form-topo {
    background-position: -3rem center !important;
  }

  /* Listas do footer no mobile: .footer-col ul li a alinhado a esquerda */
  footer .footer-col ul {
    width: min(100%, 260px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: left !important;
  }

  footer .footer-col ul li a {
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    transition: transform 0.24s ease, color 0.24s ease !important;
  }

  footer .footer-col ul li a span {
    text-align: left !important;
  }

  /* Transicao dos links do footer mobile: .footer-col ul li a move levemente no hover */
  footer .footer-col ul li a:hover,
  footer .footer-col ul li a:focus {
    transform: translateX(8px) !important;
  }
}

@media only screen and (max-width: 425px) {
  /* Topo-banner em celulares estreitos com altura menor e imagem centralizada */
  section.topo-banner {
    height: 250px;
    margin: 0 0 16px 0;
  }

  /* Em celulares estreitos reduz mais o banner para preservar contato e e-mail */
  section.slider .slide-box .img-mobile {
    width: 86% !important;
    max-width: 86% !important;
  }
}