Refactor CSS comments and improve layout styles

Author: lauraataide8

style.css

@@ -11,20 +11,23 @@
     --max-width-site: 1200px;
 }
 
-/* --- RESET & PROTEÇÃO --- */
+/* --- RESET & BLINDAGEM (CORREÇÃO DO SCROLL LATERAL) --- */
 * { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; }
-html { scroll-behavior: smooth; }
+html { scroll-behavior: smooth; overflow-x: hidden; /* Trava o HTML */ }
 
 body {
     font-family: var(--fonte-corpo);
     color: var(--cor-texto);
     background: linear-gradient(68deg, var(--cor-fundo-inicio), var(--cor-fundo-fim));
-    overflow-x: hidden; /* Impede zoom errado no iPhone */
+    /* As linhas abaixo impedem que o site "dance" para os lados no iPhone */
+    overflow-x: hidden; 
     width: 100%;
+    max-width: 100vw;
+    position: relative;
     -webkit-text-size-adjust: 100%;
 }
 
-/* --- CONTAINER --- */
+/* --- CONTAINER GLOBAL --- */
 .container {
     max-width: var(--max-width-site);
     margin: 0 auto;
@@ -56,7 +59,7 @@ body {
 }
 .cabecalho-menu-item:hover::after { width: 100%; }
 
-/* --- HERO SECTION (CORRIGIDA) --- */
+/* --- HERO SECTION (PC: FOTO 350px) --- */
 .conteudo-principal {
     display: flex; align-items: center; justify-content: space-between;
     padding: 80px 0; gap: 50px; width: 100%;
@@ -69,7 +72,8 @@ body {
 .snake-container img { width: 100%; height: auto; display: block; }
 
 .conteudo-principal-imagem {
-    flex: 0 0 350px; /* TRAVADO EM 350px NO PC */
+    /* TRAVADO EM 350px NO PC */
+    flex: 0 0 350px; 
     width: 350px; display: flex; justify-content: center; align-items: center;
 }
 .conteudo-principal-imagem img {
@@ -87,7 +91,11 @@ body {
 .sobre-texto { column-count: 2; column-gap: 60px; line-height: 1.8; text-align: justify; font-size: 1.05rem; }
 
 /* --- CARDS PROJETOS --- */
-.meu-swiper { padding: 20px 10px 60px 10px; overflow: visible !important; }
+.meu-swiper { 
+    padding: 20px 10px 60px 10px; 
+    /* No PC deixamos visível para a sombra sair, no Mobile vamos travar */
+    overflow: visible !important; 
+}
 .swiper-slide { height: auto; display: flex; }
 .projeto-card {
     background: var(--cor-card); padding: 25px; border-radius: 15px;
@@ -116,19 +124,14 @@ body {
 .habilidades-lista li:hover { border-color: var(--cor-destaque-secundario); transform: translateY(-5px); }
 .habilidades-lista li i { font-size: 2.5rem; color: var(--cor-destaque-secundario); }
 
-/* --- RODAPÉ (RESTAURADO E COMPACTO) --- */
+/* --- RODAPÉ (RESTAURADO) --- */
 .rodape {
-    background-color: #000000;
-    padding: 30px 0; /* Padding menor */
-    border-top: 2px solid var(--cor-destaque);
-    width: 100%;
+    background-color: #000000; padding: 30px 0; border-top: 2px solid var(--cor-destaque); width: 100%;
 }
 .rodape-container {
     display: flex; justify-content: space-between; align-items: center; gap: 30px;
 }
 .rodape-info h2 { font-family: var(--fonte-titulos); color: #fff; font-size: 1.5rem; margin-bottom: 10px; }
-
-/* Badges de Contato (Compactos) */
 .rodape-contato-badges { display: flex; gap: 10px; flex-wrap: wrap; }
 .badge-contato {
     display: flex; align-items: center; gap: 8px; background: #111;
@@ -137,7 +140,7 @@ body {
 }
 .badge-contato:hover { border-color: var(--cor-destaque); background: rgba(151, 241, 38, 0.1); color: var(--cor-destaque); }
 
-/* Portal Gun Card (Rick & Morty) */
+/* Portal Gun Card */
 .portal-gun-card {
     position: relative; width: 240px; height: 120px;
     background: #111; border: 2px solid #333; border-radius: 12px;
@@ -167,22 +170,33 @@ body {
 }
 .whatsapp-flutuante:hover { transform: scale(1.1); }
 
-/* --- RESPONSIVIDADE --- */
+/* --- RESPONSIVIDADE (MOBILE E TABLET) --- */
 @media (max-width: 992px) {
+    /* Layout */
     .conteudo-principal { flex-direction: column-reverse; text-align: center; padding: 40px 0; gap: 30px; }
+    
+    /* Correção da Imagem no Mobile (destrava o 350px) */
     .conteudo-principal-imagem { flex: 0 0 auto; width: 100%; max-width: 280px; }
     .conteudo-principal-escrito { width: 100%; }
+    
     .snake-container { display: flex; justify-content: center; }
     .conteudo-principal-titulo { font-size: 2rem; }
     .sobre-texto { column-count: 1; text-align: left; }
+    
+    /* BLINDAGEM DO SWIPER NO MOBILE */
+    /* Isso impede que o carrossel estoure a largura da tela no celular */
+    .meu-swiper {
+        overflow: hidden !important; 
+        width: 100%;
+        padding-left: 0;
+        padding-right: 0;
+    }
 }
 
 @media (max-width: 768px) {
     .cabecalho-container { flex-direction: column; gap: 15px; }
     .cabecalho-menu { flex-wrap: wrap; justify-content: center; gap: 15px; }
-    
-    /* Footer no Celular */
     .rodape-container { flex-direction: column; text-align: center; gap: 25px; }
     .rodape-contato-badges { justify-content: center; }
-    .portal-gun-card { width: 100%; max-width: 260px; } /* Evita quebra */
+    .portal-gun-card { width: 100%; max-width: 260px; }
 }