/* ================================
   WonderArt - Arte que Ensina ⭐
   CSS com Bordas Rabiscadas
   ================================ */

     /* Reset e Configurações Base */
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     /* Prevenir overflow horizontal específico */
     .section, .hero-container, .about-container, .contact-container, .portfolio-grid, .services-grid, .nav-container {
         max-width: 100%;
     }

     :root {
         /* Cores principais da identidade */
         --yellow-primary: #FCCD4D;
         --coral-primary: #F98C8C;
         --blue-primary: #A3D5F7;

         /* Cores secundárias */
         --green-secondary: #AEE6C5;
         --purple-secondary: #D7B4F3;
         --cream-secondary: #FDF9F3;
         --gray-secondary: #4B4B4B;

         /* Cores neutras */
         --white: #FFFFFF;
         --black: #2C2C2C;

         /* Sombras suaves */
         --shadow-light: rgba(75, 75, 75, 0.1);
         --shadow-medium: rgba(75, 75, 75, 0.2);
         --shadow-strong: rgba(75, 75, 75, 0.3);

         /* Tons de bege */
         --paper-cream: #FAF7F0;
         --warm-beige: #F1E9D5;
         --soft-brown: #E6D5B7;
         --medium-brown: #D4C4A0;
         --dark-brown: #8B7355;
         --charcoal: #4A4138;
     }

     html {
         overflow-x: hidden;
         width: 100%;
     }

     body {
         font-family: 'Quicksand', sans-serif;
         background: var(--cream-secondary);
         color: var(--gray-secondary);
         line-height: 1.6;
         overflow-x: hidden;
         width: 100%;
         max-width: 100vw;
         margin: 0;
         padding: 0;
         
         /* Android Chrome - Navigation Bar Color (only for system bars) */
         --android-navbar-color: var(--green-secondary);
         
         /* Ensure body extends to system bars */
         min-height: 100vh;
         min-height: -webkit-fill-available;
         
         /* iOS Safe Area Support */
         padding-top: env(safe-area-inset-top);
         padding-bottom: env(safe-area-inset-bottom);
         padding-left: env(safe-area-inset-left);
         padding-right: env(safe-area-inset-right);
     }
     
     /* iOS Specific Styles */
     @supports (-webkit-touch-callout: none) {
         body {
             /* iOS Safari - keep normal background */
             background: var(--cream-secondary);
         }
         
         /* Ensure content starts after status bar */
         .navbar {
             padding-top: env(safe-area-inset-top);
         }
     }
     
     /* Android Chrome Specific */
     @media screen and (max-width: 768px) {
         body {
             /* Android - keep normal background */
             background: var(--cream-secondary);
         }
     }

     /* ================================
   NOVO LOADING SCREEN - SVG STAR
   ================================ */

     #loading-screen {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: var(--green-secondary);
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 10000;
         transition: opacity 0.5s ease, visibility 0.5s ease;
         overflow: hidden;
     }

     #loading-screen.hidden {
         opacity: 0;
         visibility: hidden;
         z-index: -1;
     }

     .loading-object {
         position: absolute;
         top: 44%;
         left: 50%;
         width: 0px;
         height: 0px;
     }

     .loading-wrap>* {
         position: absolute;
         top: 50%;
         left: 50%;
         width: 350px;
         height: 350px;
         margin-left: -175px;
         margin-top: -175px;
     }

     /* Mobile Loading Screen Adjustments */
     @media (max-width: 768px) {
         .loading-wrap>* {
             width: 250px;
             height: 250px;
             margin-left: -125px;
             margin-top: -125px;
         }
     }

     @media (max-width: 480px) {
         .loading-wrap>* {
             width: 180px;
             height: 180px;
             margin-left: -90px;
             margin-top: -90px;
         }
     }

     .loading-path {
         fill: var(--yellow-primary);
         stroke: var(--coral-primary);
         stroke-width: 2;
     }

     /* ================================
   MELHORIAS PARA TOUCH E MOBILE
   ================================ */

     /* Melhor área de toque para elementos interativos */
     .nav-item,
     .mobile-nav-item,
     .fun-btn,
     .sketched-btn,
     .submit-btn,
     .whatsapp-float,
     .faq-question,
     .mobile-menu-btn {
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
         -webkit-touch-callout: none;
         -webkit-user-select: none;
         -khtml-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
     }

     /* Smooth scrolling para iOS */
     html {
         -webkit-overflow-scrolling: touch;
     }

     /* Prevent zoom on input focus (iOS) */
     input[type="text"],
     input[type="email"],
     input[type="tel"],
     textarea,
     select {
         font-size: 16px;
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
     }

     /* Melhor feedback visual para touch */
     .nav-item:active,
     .mobile-nav-item:active,
     .fun-btn:active,
     .sketched-btn:active,
     .submit-btn:active {
         transform: scale(0.98);
         transition: transform 0.1s ease;
     }

     /* Gestos de swipe para mobile menu */
     .mobile-menu {
         touch-action: manipulation;
     }

     /* Melhor scroll para seções */
     .section,
     .hero,
     .about,
     .contact,
     .portfolio,
     .process,
     .testimonials,
     #home,
     #about,
     #services,
     #process,
     #portfolio,
     #testimonials,
     #faq,
     #contact {
         scroll-margin-top: 100px;
     }

     /* ================================
   BORDAS RABISCADAS - BASE
   ================================ */

     .sketched-card {
         border: 3px solid var(--coral-primary);
         border-radius: 15px 25px 20px 18px / 18px 20px 25px 15px;
         position: relative;
         background: var(--white);
         transform: rotate(0.5deg);
         transition: all 0.3s ease;
     }

     .sketched-card::before {
         content: '';
         position: absolute;
         top: -2px;
         left: -2px;
         right: -2px;
         bottom: -2px;
         border: 2px solid var(--yellow-primary);
         border-radius: 20px 15px 25px 22px / 22px 25px 15px 20px;
         opacity: 0.7;
         z-index: -1;
     }

     .sketched-card.variant-2 {
         border-radius: 18px 22px 16px 24px / 24px 16px 22px 18px;
         border-color: var(--blue-primary);
         transform: rotate(-0.5deg);
     }

     .sketched-card.variant-2::before {
         border-radius: 24px 18px 20px 16px / 16px 20px 18px 24px;
         border-color: var(--green-secondary);
     }

     .sketched-card.variant-3 {
         border-radius: 22px 16px 24px 20px / 20px 24px 16px 22px;
         border-color: var(--green-secondary);
         transform: rotate(0.8deg);
     }

     .sketched-card.variant-3::before {
         border-radius: 16px 24px 18px 22px / 22px 18px 24px 16px;
         border-color: var(--purple-secondary);
     }

     .sketched-card.variant-4 {
         border-radius: 25px 20px 15px 23px / 23px 15px 20px 25px;
         border-color: var(--purple-secondary);
         transform: rotate(-0.8deg);
     }

     .sketched-card.variant-4::before {
         border-radius: 20px 25px 23px 15px / 15px 23px 25px 20px;
         border-color: var(--coral-primary);
     }

     .sketched-card:hover {
         transform: rotate(0deg) scale(1.02);
         box-shadow: 0 10px 30px var(--shadow-medium);
     }

     /* ================================
   BOTÕES RABISCADOS
   ================================ */

     .sketched-btn {
         border: 3px solid var(--gray-secondary);
         border-radius: 25px 20px 30px 18px / 18px 30px 20px 25px;
         position: relative;
         transform: rotate(-0.5deg);
         transition: all 0.4s ease;
     }

     .sketched-btn::before {
         content: '';
         position: absolute;
         top: -2px;
         left: -2px;
         right: -2px;
         bottom: -2px;
         border: 2px solid var(--yellow-primary);
         border-radius: 20px 30px 18px 25px / 25px 18px 30px 20px;
         opacity: 0.6;
         z-index: -1;
         transition: all 0.3s ease;
     }

     .sketched-btn:hover {
         transform: rotate(0.5deg) scale(1.05) translateY(-3px);
         box-shadow: 0 12px 35px var(--shadow-strong);
     }

     .sketched-btn:hover::before {
         opacity: 1;
         transform: scale(1.03);
     }

     /* ================================
   FORMULÁRIOS RABISCADOS
   ================================ */

     .sketched-form {
         border: 3px solid var(--coral-primary);
         border-radius: 25px 30px 20px 35px / 35px 20px 30px 25px;
         position: relative;
         transform: rotate(0.8deg);
     }

     .sketched-form::before {
         content: '';
         position: absolute;
         top: -3px;
         left: -3px;
         right: -3px;
         bottom: -3px;
         border: 2px solid var(--blue-primary);
         border-radius: 30px 25px 35px 20px / 20px 35px 25px 30px;
         opacity: 0.5;
         z-index: -1;
     }

     .sketched-input {
         border: 3px solid var(--blue-primary);
         border-radius: 15px 18px 12px 20px / 20px 12px 18px 15px;
         position: relative;
         transform: rotate(-0.2deg);
         transition: all 0.3s ease;
     }

     .sketched-input:focus {
         outline: none;
         border-color: var(--coral-primary);
         transform: rotate(0deg) scale(1.02);
         box-shadow: 0 4px 15px var(--shadow-medium);
     }

     .sketched-input:nth-child(odd) {
         transform: rotate(0.2deg);
     }

     /* ================================
   ELEMENTOS ESPECÍFICOS RABISCADOS
   ================================ */

     .sketched-box {
         border: 3px solid var(--coral-primary);
         border-radius: 20px 25px 15px 30px / 30px 15px 25px 20px;
         position: relative;
         transform: rotate(-0.3deg);
     }

     .sketched-box::before {
         content: '';
         position: absolute;
         top: -2px;
         left: -2px;
         right: -2px;
         bottom: -2px;
         border: 2px solid var(--blue-primary);
         border-radius: 25px 20px 30px 15px / 15px 30px 20px 25px;
         opacity: 0.6;
         z-index: -1;
     }

     .sketched-canvas {
         border: 5px solid var(--gray-secondary);
         border-radius: 15px 20px 12px 25px / 25px 12px 20px 15px;
         position: relative;
         transform: rotate(1deg);
     }

     .sketched-canvas::before {
         content: '';
         position: absolute;
         top: -3px;
         left: -3px;
         right: -3px;
         bottom: -3px;
         border: 2px solid var(--coral-primary);
         border-radius: 20px 15px 25px 12px / 12px 25px 15px 20px;
         opacity: 0.7;
         z-index: -1;
     }

     .sketched-palette {
         border: 4px solid var(--gray-secondary);
         border-radius: 50% 20% 40% 30% / 30% 40% 20% 50%;
         position: relative;
         transform: rotate(-10deg);
     }

     .sketched-palette::before {
         content: '';
         position: absolute;
         top: -2px;
         left: -2px;
         right: -2px;
         bottom: -2px;
         border: 2px solid var(--yellow-primary);
         border-radius: 40% 50% 30% 20% / 20% 30% 50% 40%;
         opacity: 0.6;
         z-index: -1;
     }

     .sketched-avatar {
         border: 6px solid var(--white);
         position: relative;
     }

     .sketched-avatar::before {
         content: '';
         position: absolute;
         top: -15px;
         left: -15px;
         right: -15px;
         bottom: -15px;
         border: 3px solid var(--blue-primary);
         border-radius: 45% 55% 50% 60% / 60% 50% 55% 45%;
         opacity: 0.6;
         z-index: -1;
     }

     .sketched-section {
         border-radius: 40px 30px 35px 25px / 30px 35px 25px 40px;
         position: relative;
     }

     .sketched-section::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         border: 4px solid rgba(255, 255, 255, 0.3);
         border-radius: 35px 40px 25px 30px / 25px 30px 40px 35px;
         opacity: 0.8;
         z-index: 1;
         pointer-events: none;
     }

     .sketched-social {
         border: 3px solid var(--white);
         border-radius: 40% 60% 50% 70% / 70% 50% 60% 40%;
         position: relative;
         transform: rotate(-5deg);
         transition: all 0.3s ease;
     }

     .sketched-social:hover {
         transform: rotate(5deg) scale(1.1);
         border-radius: 60% 40% 70% 50% / 50% 70% 40% 60%;
     }

     /* ================================
   NAVEGAÇÃO PROFISSIONAL COM RABISCOS
   ================================ */

     .navbar {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         width: 100%;
         max-width: 100vw;
         background: rgba(253, 249, 243, 0.95);
         backdrop-filter: blur(20px);
         padding: 1rem 2rem;
         box-shadow: 0 2px 20px rgba(75, 75, 75, 0.08);
         z-index: 1000;
         border-bottom: 1px solid rgba(252, 205, 77, 0.2);
         transition: all 0.3s ease;
         overflow: hidden;
     }

     /* Navbar expandida quando menu mobile está aberto */
     .navbar.menu-open {
         height: 100vh;
         overflow-y: auto;
         overflow-x: hidden;
         padding: 1rem 2rem 2rem;
         background: rgba(253, 249, 243, 0.98);
         backdrop-filter: blur(20px);
     }

     .nav-container {
         max-width: 1200px;
         margin: 0 auto;
         display: flex;
         justify-content: space-between;
         align-items: center;
         width: 100%;
         box-sizing: border-box;
         padding: 0;
     }

     .logo {
         font-family: 'Fredoka', cursive;
         font-size: 2.2rem;
         font-weight: 600;
         color: var(--gray-secondary);
         text-decoration: none;
         display: flex;
         align-items: center;
         gap: 0.5rem;
         transition: all 0.3s ease;
     }

     .logo:hover {
         transform: scale(1.02);
     }

     .logo .star {
         width: 32px;
         height: 32px;
         background: var(--yellow-primary);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--gray-secondary);
         font-size: 1.1rem;
         border: 2px solid var(--gray-secondary);
         transition: all 0.3s ease;
         animation: starGlow 3s ease-in-out infinite;
     }

     @keyframes starGlow {

         0%,
         100% {
             box-shadow: 0 0 0 0 rgba(252, 205, 77, 0.4);
             transform: scale(1);
         }

         50% {
             box-shadow: 0 0 0 8px rgba(252, 205, 77, 0);
             transform: scale(1.05);
         }
     }

     .nav-links {
         display: flex;
         list-style: none;
         gap: 0.5rem;
         align-items: center;
     }

     .nav-item {
         text-decoration: none;
         color: var(--gray-secondary);
         font-weight: 500;
         font-size: 0.95rem;
         padding: 0.75rem 1.5rem;
         background: var(--yellow-primary);
         transition: all 0.3s ease;
         border-radius: 18px 22px 16px 20px / 20px 16px 22px 18px;
         position: relative;
         border: 2px solid var(--coral-primary);
         box-shadow: 0 3px 10px var(--shadow-light);
         transform: rotate(0.3deg);
     }

     .nav-item::before {
         content: '';
         position: absolute;
         top: -1px;
         left: -1px;
         right: -1px;
         bottom: -1px;
         border: 1px solid var(--yellow-primary);
         border-radius: 22px 18px 20px 16px / 16px 20px 18px 22px;
         opacity: 0.6;
         z-index: -1;
         transition: all 0.3s ease;
     }

     .nav-item:nth-child(odd) {
         transform: rotate(-0.3deg);
         border-color: var(--coral-primary);
     }

     .nav-item:nth-child(even)::before {
         border-color: var(--coral-primary);
     }

     .nav-item:hover {
         color: var(--white);
         background: var(--coral-primary);
         transform: rotate(0deg) translateY(-2px);
         box-shadow: 0 8px 20px var(--shadow-medium);
     }

     .nav-item:hover::before {
         opacity: 1;
         transform: scale(1.02);
     }

     /* Menu Mobile Profissional com Rabiscos */
     .mobile-menu-btn {
         display: none;
         flex-direction: column;
         cursor: pointer;
         padding: 0.8rem;
         background: var(--yellow-primary);
         border-radius: 15px 20px 12px 18px / 18px 12px 20px 15px;
         border: 3px solid var(--coral-primary);
         z-index: 1001;
         transition: all 0.3s ease;
         box-shadow: 0 4px 15px var(--shadow-light);
         transform: rotate(-1deg);
         position: relative;
     }


     .mobile-menu-btn::before {
         content: '';
         position: absolute;
         top: -2px;
         left: -2px;
         right: -2px;
         bottom: -2px;
         border: 2px solid var(--coral-primary);
         border-radius: 20px 15px 18px 12px / 12px 18px 15px 20px;
         opacity: 0.6;
         z-index: -1;
         transition: all 0.3s ease;
     }

     .mobile-menu-btn:hover {
         transform: rotate(0deg) scale(1.05);
         box-shadow: 0 6px 20px var(--shadow-medium);
     }

     .mobile-menu-btn:hover::before {
         opacity: 1;
         transform: scale(1.02);
     }

     .mobile-menu-btn span {
         width: 20px;
         height: 2px;
         background: var(--gray-secondary);
         margin: 2px 0;
         transition: 0.3s ease;
         border-radius: 1px;
     }

     /* Animação do X quando ativo */
     .mobile-menu-btn.active {
         background: var(--coral-primary);
         transform: rotate(0deg);
         border-color: var(--yellow-primary);
     }

     .mobile-menu-btn.active::before {
         border-color: var(--yellow-primary);
         opacity: 1;
     }

     .mobile-menu-btn.active span {
         background: var(--white);
     }

     .mobile-menu-btn.active span:nth-child(1) {
         transform: rotate(45deg) translate(4px, 4px);
     }

     .mobile-menu-btn.active span:nth-child(2) {
         opacity: 0;
         transform: translateX(-20px);
     }

     .mobile-menu-btn.active span:nth-child(3) {
         transform: rotate(-45deg) translate(4px, -4px);
     }

     /* Blur da página quando menu está ativo */
     body.menu-open .hero,
     body.menu-open .about,
     body.menu-open .section,
     body.menu-open .portfolio,
     body.menu-open .contact,
     body.menu-open .cta-section,
     body.menu-open .footer,
     body.menu-open .process,
     body.menu-open .testimonials {
         filter: blur(3px);
         transition: filter 0.3s ease;
         position: relative;
         z-index: 1;
     }

     body.menu-open {
         overflow: hidden;
     }

     .mobile-menu {
         display: none;
         width: 100%;
         padding: 2rem 1rem 2rem;
         transition: all 0.4s ease;
         opacity: 0;
         transform: translateY(-20px);
     }

     /* Ajustes responsivos para mobile menu */
     @media (max-height: 600px) {
         .mobile-menu {
             padding: 5rem 1rem 1rem;
         }
     }

     @media (max-height: 500px) {
         .mobile-menu {
             padding: 4rem 1rem 1rem;
         }
     }

     .mobile-menu.active {
         display: flex;
         align-items: center;
         justify-content: center;
         opacity: 1;
         transform: translateY(0);
         visibility: visible;
     }

     .mobile-nav-links {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 1rem;
         max-width: 400px;
         width: 100%;
         box-sizing: border-box;
         padding: 0;
     }

     /* Ajustes responsivos para mobile nav */
     @media (max-width: 480px) {
         .mobile-nav-links {
             grid-template-columns: repeat(2, 1fr);
             gap: 0.8rem;
             max-width: 320px;
         }
     }

     @media (max-width: 360px) {
         .mobile-nav-links {
             grid-template-columns: 1fr;
             gap: 0.8rem;
             max-width: 280px;
         }
     }

     @media (max-height: 600px) {
         .mobile-nav-links {
             grid-template-columns: repeat(3, 1fr);
             gap: 0.6rem;
             max-width: 90%;
         }
     }

     .mobile-nav-item {
         text-decoration: none;
         color: var(--gray-secondary);
         font-weight: 600;
         padding: 1.2rem;
         background: var(--white);
         text-align: center;
         border-radius: 20px 15px 25px 18px / 18px 25px 15px 20px;
         transition: all 0.3s ease;
         border: 3px solid var(--coral-primary);
         box-shadow: 0 4px 12px var(--shadow-light);
         min-height: 60px;
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
         transform: rotate(1deg);
         font-size: 0.95rem;
     }

     /* Ajustes responsivos para mobile nav items */
     @media (max-width: 480px) {
         .mobile-nav-item {
             padding: 1rem;
             font-size: 0.9rem;
             min-height: 50px;
         }
     }

     @media (max-width: 360px) {
         .mobile-nav-item {
             padding: 1rem;
             font-size: 0.9rem;
             min-height: 45px;
         }
     }

     @media (max-height: 600px) {
         .mobile-nav-item {
             padding: 0.8rem;
             font-size: 0.85rem;
             min-height: 40px;
         }
     }

     .mobile-nav-item::before {
         content: '';
         position: absolute;
         top: -1px;
         left: -1px;
         right: -1px;
         bottom: -1px;
         border: 1px solid var(--blue-primary);
         border-radius: 15px 20px 18px 25px / 25px 18px 20px 15px;
         opacity: 0.5;
         z-index: -1;
     }

     .mobile-nav-item:nth-child(even) {
         transform: rotate(-1deg);
         border-color: var(--blue-primary);
     }

     .mobile-nav-item:nth-child(3n) {
         border-color: var(--green-secondary);
     }

     .mobile-nav-item:nth-child(4n) {
         border-color: var(--purple-secondary);
     }

     .mobile-nav-item:hover {
         background: var(--coral-primary);
         color: var(--white);
         transform: rotate(0deg) translateY(-2px) scale(1.02);
         box-shadow: 0 8px 25px var(--shadow-medium);
     }

     /* ================================
   BOTÕES PRINCIPAIS
   ================================ */

     .fun-btn {
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         background: var(--coral-primary);
         color: var(--white);
         padding: 1rem 2rem;
         text-decoration: none;
         font-weight: 700;
         font-size: 1.1rem;
         border: none;
         cursor: pointer;
         transition: all 0.3s ease;
         border-radius: 25px 20px 30px 18px / 18px 30px 20px 25px;
         border: 3px solid var(--white);
         box-shadow: 0 6px 20px var(--shadow-medium);
         font-family: 'Quicksand', sans-serif;
         position: relative;
         transform: rotate(-0.5deg);
     }

     .fun-btn::before {
         content: '';
         position: absolute;
         top: -2px;
         left: -2px;
         right: -2px;
         bottom: -2px;
         border: 2px solid var(--yellow-primary);
         border-radius: 20px 30px 18px 25px / 25px 18px 30px 20px;
         opacity: 0.6;
         z-index: -1;
     }

     .fun-btn:hover {
         transform: rotate(0.5deg) translateY(-3px);
         box-shadow: 0 12px 35px var(--shadow-strong);
         background: var(--yellow-primary);
         color: var(--gray-secondary);
     }

     .fun-btn.secondary {
         background: var(--blue-primary);
         transform: rotate(0.5deg);
     }

     .fun-btn.secondary:hover {
         background: var(--purple-secondary);
         transform: rotate(-0.5deg) translateY(-3px);
     }

     /* ================================
   HERO SECTION
   ================================ */

     .hero {
         min-height: 100vh;
         display: flex;
         align-items: center;
         padding: 8rem 2rem 4rem;
         background: linear-gradient(135deg, var(--paper-cream) 0%, var(--cream-secondary) 50%, var(--paper-cream) 100%);
         position: relative;
         overflow: hidden;
         width: 100%;
         box-sizing: border-box;
     }

     .hero::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
         opacity: 0.3;
     }

     .hero-container {
         max-width: 1200px;
         margin: 0 auto;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 4rem;
         align-items: center;
         position: relative;
         z-index: 2;
     }

     .hero-content h1 {
         font-family: 'Fredoka', cursive;
         font-size: 3.5rem;
         font-weight: 700;
         color: var(--gray-secondary);
         line-height: 1.2;
         margin-bottom: 1.5rem;
     }

     .hero-content .highlight {
         color: var(--coral-primary);
         position: relative;
     }

     .hero-content .highlight::after {
         content: '';
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         height: 8px;
         background: var(--yellow-primary);
         opacity: 0.7;
         border-radius: 4px;
         z-index: -1;
     }

     .hero-subtitle {
         font-family: 'Fredoka', cursive;
         font-size: 1.5rem;
         color: var(--gray-secondary);
         margin-bottom: 2rem;
         font-weight: 500;
         display: flex;
         align-items: center;
         gap: 0.5rem;
     }

     .hero-description {
         font-size: 1.1rem;
         margin-bottom: 3rem;
         padding: 2rem;
         line-height: 1.7;
     }

     .cta-buttons {
         display: flex;
         gap: 1rem;
         flex-wrap: wrap;
     }

     /* ================================
   ARTE VISUAL NO HERO
   ================================ */

     .hero-art {
         display: flex;
         justify-content: center;
         align-items: center;
         position: relative;
     }

     .art-studio {
         width: 400px;
         height: 320px;
         position: relative;
         animation: floatArt 6s ease-in-out infinite;
     }

     @keyframes floatArt {

         0%,
         100% {
             transform: translateY(0px);
         }

         50% {
             transform: translateY(-15px);
         }
     }

     .canvas {
         width: 280px;
         height: 200px;
         background: var(--white);
         position: relative;
         box-shadow: 0 15px 30px var(--shadow-medium);
         overflow: hidden;
     }

     .canvas-art {
         position: absolute;
         top: 15px;
         left: 15px;
         right: 15px;
         bottom: 15px;
         background: linear-gradient(45deg, var(--coral-primary), var(--blue-primary), var(--yellow-primary));
         border-radius: 8px;
         animation: artFlow 8s ease-in-out infinite;
     }

     @keyframes artFlow {

         0%,
         100% {
             background: linear-gradient(45deg, var(--coral-primary), var(--blue-primary), var(--yellow-primary));
         }

         33% {
             background: linear-gradient(45deg, var(--purple-secondary), var(--green-secondary), var(--coral-primary));
         }

         66% {
             background: linear-gradient(45deg, var(--yellow-primary), var(--coral-primary), var(--blue-primary));
         }
     }

     .paint-palette {
         position: absolute;
         bottom: -30px;
         left: -40px;
         width: 120px;
         height: 80px;
         background: var(--white);
         display: flex;
         flex-wrap: wrap;
         padding: 10px;
         gap: 5px;
         box-shadow: 0 8px 20px var(--shadow-medium);
     }

     .paint-dot {
         width: 15px;
         height: 15px;
         border-radius: 50%;
         animation: colorPulse 3s ease-in-out infinite;
     }

     .paint-dot:nth-child(1) {
         background: var(--coral-primary);
         animation-delay: 0s;
     }

     .paint-dot:nth-child(2) {
         background: var(--blue-primary);
         animation-delay: 0.5s;
     }

     .paint-dot:nth-child(3) {
         background: var(--yellow-primary);
         animation-delay: 1s;
     }

     .paint-dot:nth-child(4) {
         background: var(--green-secondary);
         animation-delay: 1.5s;
     }

     .paint-dot:nth-child(5) {
         background: var(--purple-secondary);
         animation-delay: 2s;
     }

     @keyframes colorPulse {

         0%,
         100% {
             transform: scale(1);
             opacity: 0.8;
         }

         50% {
             transform: scale(1.3);
             opacity: 1;
         }
     }

     .brushes {
         position: absolute;
         top: -20px;
         right: -50px;
         display: flex;
         gap: 8px;
     }

     .brush {
         width: 8px;
         height: 60px;
         background: linear-gradient(to bottom, var(--gray-secondary) 70%, var(--coral-primary) 70%);
         border-radius: 20px 20px 50px 50px;
         animation: brushDance 4s ease-in-out infinite;
     }

     .brush:nth-child(1) {
         animation-delay: 0s;
     }

     .brush:nth-child(2) {
         animation-delay: 1s;
     }

     .brush:nth-child(3) {
         animation-delay: 2s;
     }

     @keyframes brushDance {

         0%,
         100% {
             transform: rotate(0deg);
         }

         25% {
             transform: rotate(-10deg);
         }

         50% {
             transform: rotate(5deg);
         }

         75% {
             transform: rotate(-5deg);
         }
     }

     /* ================================
   SECTIONS GERAIS
   ================================ */

     .section {
         padding: 6rem 2rem;
         max-width: 1200px;
         margin: 0 auto;
         width: 100%;
         box-sizing: border-box;
         overflow-x: hidden;
     }

     .section-title {
         font-family: 'Fredoka', cursive;
         font-size: 2.8rem;
         text-align: center;
         color: var(--gray-secondary);
         margin-bottom: 1rem;
         font-weight: 700;
     }

     .section-subtitle {
         font-family: 'Quicksand', sans-serif;
         font-size: 1.3rem;
         text-align: center;
         color: var(--gray-secondary);
         margin-bottom: 4rem;
         font-weight: 600;
     }

     /* ================================
   ABOUT SECTION
   ================================ */

     .about {
         background: var(--white);
         border-radius: 30px 25px 35px 20px / 20px 35px 25px 30px;
         margin: 4rem 0;
         padding: 5rem 2rem;
         box-shadow: 0 15px 40px var(--shadow-light);
         border: 3px solid var(--yellow-primary);
         position: relative;
         transform: rotate(0.3deg);
     }

     .about::before {
         content: '';
         position: absolute;
         top: -3px;
         left: -3px;
         right: -3px;
         bottom: -3px;
         border: 2px solid var(--coral-primary);
         border-radius: 25px 30px 20px 35px / 35px 20px 30px 25px;
         opacity: 0.5;
         z-index: -1;
     }

     .about-container {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 4rem;
         align-items: center;
     }

     .about-content {
         font-size: 1.1rem;
         line-height: 1.8;
     }

     .about-content p {
         margin-bottom: 1.5rem;
     }

     .about-stats {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 1.5rem;
         margin-top: 2rem;
     }

     .stat-card {
         text-align: center;
         padding: 1.5rem;
         background: var(--cream-secondary);
         transition: all 0.3s ease;
         box-shadow: 0 6px 20px var(--shadow-light);
     }

     .stat-card:hover {
         transform: rotate(0deg) translateY(-5px) scale(1.05);
         box-shadow: 0 15px 35px var(--shadow-medium);
     }

     .stat-number {
         font-family: 'Fredoka', cursive;
         font-size: 2.5rem;
         font-weight: 700;
         color: var(--gray-secondary);
         display: block;
     }

     .stat-label {
         color: var(--gray-secondary);
         font-weight: 600;
     }

     .about-image {
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .teacher-avatar {
         width: 200px;
         height: 200px;
         background: linear-gradient(45deg, var(--coral-primary), var(--yellow-primary));
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 4rem;
         color: var(--white);
         box-shadow: 0 15px 35px var(--shadow-medium);
         position: relative;
     }

     /* ================================
   SERVICES SECTION
   ================================ */

     .services-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 2.5rem;
         margin-top: 4rem;
     }

     .service-card {
         padding: 2.5rem;
         text-align: center;
         transition: all 0.3s ease;
         box-shadow: 0 8px 25px var(--shadow-light);
         position: relative;
         overflow: hidden;
     }

     .service-card:hover {
         transform: rotate(0deg) translateY(-10px) scale(1.05);
         box-shadow: 0 20px 50px var(--shadow-strong);
     }

     .service-icon {
         font-size: 3.5rem;
         margin-bottom: 1.5rem;
         animation: iconBob 4s ease-in-out infinite;
     }

     .service-card:nth-child(1) .service-icon {
         color: var(--coral-primary);
     }

     .service-card:nth-child(2) .service-icon {
         color: var(--blue-primary);
     }

     .service-card:nth-child(3) .service-icon {
         color: var(--green-secondary);
     }

     .service-card:nth-child(4) .service-icon {
         color: var(--purple-secondary);
     }

     .service-card:nth-child(5) .service-icon {
         color: var(--yellow-primary);
     }

     .service-card:nth-child(6) .service-icon {
         color: var(--coral-primary);
     }

     @keyframes iconBob {

         0%,
         100% {
             transform: translateY(0);
         }

         50% {
             transform: translateY(-8px);
         }
     }

     .service-card h3 {
         font-family: 'Fredoka', cursive;
         font-size: 1.6rem;
         color: var(--gray-secondary);
         margin-bottom: 1rem;
         font-weight: 600;
     }

     /* ================================
   PORTFOLIO SECTION
   ================================ */

     .portfolio {
         background: linear-gradient(135deg, var(--green-secondary) 0%, var(--blue-primary) 100%);
         border-radius: 40px 30px 35px 25px / 30px 35px 25px 40px;
         margin: 4rem 0;
         padding: 5rem 2rem;
         color: var(--white);
         position: relative;
     }

     .portfolio::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         border: 4px solid rgba(255, 255, 255, 0.2);
         border-radius: 35px 40px 25px 30px / 25px 30px 40px 35px;
         opacity: 0.8;
         z-index: 1;
         pointer-events: none;
     }

     .portfolio .section-title,
     .portfolio .section-subtitle {
         color: var(--white);
         position: relative;
         z-index: 2;
     }

     .portfolio-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 2.5rem;
         margin-top: 4rem;
         position: relative;
         z-index: 2;
     }

     .portfolio-item {
         background: var(--white);
         overflow: hidden;
         transition: all 0.3s ease;
         box-shadow: 0 8px 25px var(--shadow-medium);
     }

     .portfolio-item:hover {
         transform: rotate(0deg) translateY(-10px) scale(1.05);
         box-shadow: 0 20px 50px var(--shadow-strong);
     }

     .portfolio-image {
         height: 200px;
         background: linear-gradient(45deg, var(--coral-primary), var(--yellow-primary));
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--white);
         font-size: 3rem;
     }

     .portfolio-info {
         padding: 1.5rem;
         text-align: center;
     }

     .portfolio-info h4 {
         font-family: 'Fredoka', cursive;
         font-size: 1.4rem;
         color: var(--gray-secondary);
         margin-bottom: 0.5rem;
         font-weight: 600;
     }

     .portfolio-info p {
         color: var(--gray-secondary);
         opacity: 0.8;
     }

     /* ================================
   PROCESS SECTION
   ================================ */

     .process {
         margin: 4rem 0;
         padding: 5rem 2rem;
         position: relative;
     }

     .process-timeline {
         position: relative;
         max-width: 800px;
         margin: 4rem auto;
     }

     .timeline-line {
         position: absolute;
         left: 50%;
         top: 0;
         bottom: 0;
         width: 3px;
         background: var(--coral-primary);
         transform: translateX(-50%);
         border-radius: 2px;
     }

     .process-step {
         display: flex;
         align-items: center;
         margin-bottom: 4rem;
         position: relative;
     }

     .process-step:nth-child(even) {
         flex-direction: row-reverse;
         text-align: right;
     }

     .process-number {
         width: 50px;
         height: 50px;
         background: var(--coral-primary);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.5rem;
         font-weight: 700;
         color: var(--white);
         border: 4px solid var(--white);
         margin: 0 2rem;
         flex-shrink: 0;
         box-shadow: 0 6px 20px var(--shadow-medium);
         z-index: 2;
         position: relative;
     }

     .process-content {
         flex: 1;
         padding: 2rem;
         box-shadow: 0 8px 25px var(--shadow-light);
         position: relative;
     }

     .process-content h3 {
         font-family: 'Fredoka', cursive;
         font-size: 1.6rem;
         color: var(--gray-secondary);
         margin-bottom: 1rem;
         font-weight: 600;
     }

     /* ================================
   TESTIMONIALS SECTION
   ================================ */

     .testimonials {
         margin: 4rem 0;
         padding: 5rem 2rem;
         position: relative;
     }

     .testimonials-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 2.5rem;
         margin-top: 4rem;
     }

     .testimonial-card {
         padding: 2.5rem;
         text-align: center;
         transition: all 0.3s ease;
         box-shadow: 0 8px 25px var(--shadow-light);
         position: relative;
     }

     .testimonial-card:hover {
         transform: rotate(0deg) translateY(-5px) scale(1.02);
     }

     .testimonial-content {
         font-size: 1.1rem;
         font-style: italic;
         margin-bottom: 2rem;
         line-height: 1.6;
     }

     .testimonial-author {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 1rem;
     }

     .author-avatar {
         width: 50px;
         height: 50px;
         background: var(--coral-primary);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--white);
         font-size: 1.3rem;
         border: 3px solid var(--white);
         font-weight: 700;
     }

     .author-info h5 {
         color: var(--gray-secondary);
         font-weight: 700;
         margin-bottom: 0.2rem;
     }

     .author-info p {
         color: var(--gray-secondary);
         opacity: 0.7;
         font-size: 0.9rem;
     }

     .stars {
         color: var(--yellow-primary);
         font-size: 1.2rem;
         margin-top: 1rem;
     }

     /* ================================
   FAQ SECTION
   ================================ */

     .faq-container {
         max-width: 800px;
         margin: 4rem auto;
     }

     .faq-item {
         margin-bottom: 1.5rem;
         overflow: hidden;
         transition: all 0.3s ease;
         box-shadow: 0 6px 20px var(--shadow-light);
         position: relative;
     }

     .faq-item:hover {
         transform: rotate(0deg);
     }

     .faq-question {
         padding: 1.5rem 2rem;
         cursor: pointer;
         font-size: 1.1rem;
         font-weight: 700;
         color: var(--gray-secondary);
         display: flex;
         justify-content: space-between;
         align-items: center;
         transition: all 0.3s ease;
         background: var(--white);
     }

     .faq-question:hover {
         background: var(--cream-secondary);
     }

     .faq-answer {
         padding: 0 2rem 1.5rem;
         color: var(--gray-secondary);
         line-height: 1.6;
         display: none;
         background: var(--white);
     }

     .faq-item.active .faq-answer {
         display: block;
         animation: fadeIn 0.3s ease;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
             transform: translateY(-10px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     .faq-icon {
         font-size: 1.5rem;
         color: var(--coral-primary);
         transition: transform 0.3s ease;
     }

     .faq-item.active .faq-icon {
         transform: rotate(45deg);
     }

     .contact {
         background: var(--white);
         border-radius: 30px 25px 35px 20px / 20px 35px 25px 30px;
         margin: 4rem 0;
         padding: 5rem 2rem;
         box-shadow: 0 15px 40px var(--shadow-light);
         border: 3px solid var(--coral-primary);
         position: relative;
         transform: rotate(-0.2deg);
     }

     .contact::before {
         content: '';
         position: absolute;
         top: -3px;
         left: -3px;
         right: -3px;
         bottom: -3px;
         border: 2px solid var(--blue-primary);
         border-radius: 25px 30px 20px 35px / 35px 20px 30px 25px;
         opacity: 0.5;
         z-index: -1;
     }

     .contact-container {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 4rem;
         max-width: 1000px;
         margin: 0 auto;
     }

     .contact-info h3 {
         font-family: 'Fredoka', cursive;
         font-size: 2.2rem;
         color: var(--gray-secondary);
         margin-bottom: 2rem;
         font-weight: 600;
     }

     .contact-item {
         display: flex;
         align-items: center;
         gap: 1rem;
         margin-bottom: 1.5rem;
         padding: 1.5rem;
         background: var(--cream-secondary);
         transition: all 0.3s ease;
         box-shadow: 0 6px 20px var(--shadow-light);
     }

     .contact-item:hover {
         transform: rotate(0deg) translateY(-3px) scale(1.02);
         box-shadow: 0 12px 30px var(--shadow-medium);
     }

     .contact-icon {
         width: 50px;
         height: 50px;
         background: var(--coral-primary);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--white);
         border: 3px solid var(--white);
         font-size: 1.3rem;
     }

     .form-container {
         background: var(--cream-secondary);
         padding: 2.5rem;
         box-shadow: 0 10px 30px var(--shadow-medium);
     }

     .form-container h3 {
         font-family: 'Fredoka', cursive;
         font-size: 2rem;
         margin-bottom: 2rem;
         text-align: center;
         color: var(--gray-secondary);
         font-weight: 600;
     }

     .form-group {
         margin-bottom: 1.5rem;
     }

     .form-group label {
         display: block;
         margin-bottom: 0.5rem;
         font-weight: 700;
         color: var(--gray-secondary);
     }

     .form-group input,
     .form-group textarea,
     .form-group select {
         width: 100%;
         padding: 1rem;
         font-family: 'Quicksand', sans-serif;
         background: var(--white);
         font-size: 1rem;
     }

     .submit-btn {
         background: var(--coral-primary);
         color: var(--white);
         padding: 1.2rem 2.5rem;
         border: none;
         font-family: 'Quicksand', sans-serif;
         font-size: 1.2rem;
         font-weight: 700;
         cursor: pointer;
         transition: all 0.3s ease;
         border: 3px solid var(--white);
         box-shadow: 0 6px 20px var(--shadow-medium);
         display: flex;
         align-items: center;
         gap: 0.5rem;
         width: 100%;
         justify-content: center;
     }

     .submit-btn:hover {
         transform: rotate(0deg) translateY(-3px) scale(1.02);
         background: var(--yellow-primary);
         color: var(--gray-secondary);
         box-shadow: 0 12px 35px var(--shadow-strong);
     }

     /* ================================
   CTA SECTION
   ================================ */

     .cta-section {
         text-align: center;
         background: linear-gradient(135deg, var(--coral-primary), var(--purple-secondary));
         margin: 4rem 0;
         padding: 5rem 2rem;
         position: relative;
         overflow: hidden;
     }

     .cta-section h2 {
         font-family: 'Fredoka', cursive;
         font-size: 3rem;
         color: var(--white);
         margin-bottom: 1.5rem;
         font-weight: 700;
     }

     .cta-section p {
         font-size: 1.2rem;
         color: var(--white);
         margin-bottom: 3rem;
         max-width: 600px;
         margin-left: auto;
         margin-right: auto;
         line-height: 1.7;
     }

     .cta-btn-white {
         background: var(--white);
         color: var(--coral-primary);
         border-color: var(--yellow-primary);
     }

     .cta-btn-white:hover {
         background: var(--yellow-primary);
         color: var(--gray-secondary);
     }

     /* ================================
   FOOTER
   ================================ */

     .footer {
         background: var(--gray-secondary);
         color: var(--white);
         padding: 4rem 2rem;
         text-align: center;
     }

     .footer-container {
         max-width: 1200px;
         margin: 0 auto;
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 3rem;
     }

     .footer-section h3 {
         font-family: 'Fredoka', cursive;
         font-size: 1.8rem;
         margin-bottom: 1.5rem;
         color: var(--yellow-primary);
         font-weight: 600;
     }

     .footer-section p,
     .footer-section a {
         color: var(--white);
         opacity: 0.8;
         text-decoration: none;
         line-height: 1.6;
     }

     .footer-section a:hover {
         opacity: 1;
         color: var(--coral-primary);
     }

     .social-links {
         display: flex;
         gap: 1rem;
         justify-content: center;
         margin-top: 1rem;
     }

     .social-link {
         width: 45px;
         height: 45px;
         background: var(--coral-primary);
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--white);
         text-decoration: none;
         transition: all 0.3s ease;
     }

     .social-link:hover {
         background: var(--yellow-primary);
         color: var(--gray-secondary);
     }

     .footer-bottom {
         text-align: center;
         margin-top: 3rem;
         padding-top: 2rem;
         border-top: 1px solid rgba(255, 255, 255, 0.2);
     }

     /* ================================
   WHATSAPP FLOAT COM ANIMAÇÃO DE DESENHO
   ================================ */

     .whatsapp-float {
         position: fixed;
         width: 56px;
         height: 56px;
         bottom: 24px;
         right: 24px;
         background: linear-gradient(135deg, #25d366, #128C7E);
         color: #FFF;
         border-radius: 50%;
         text-align: center;
         font-size: 26px;
         box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
         z-index: 100;
         transition: all 0.3s ease;
         border: 3px solid var(--white);
         overflow: visible;
         animation: whatsappFloat 4s ease-in-out infinite;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     /* Rabisco de desenho animado - estilo mais sutil */
     .whatsapp-float::before {
         content: '';
         position: absolute;
         top: -8px;
         left: -8px;
         right: -8px;
         bottom: -8px;
         border: 2px solid var(--yellow-primary);
         border-radius: 50%;
         opacity: 0;
         animation: drawCircle 6s ease-in-out infinite;
         /* Imperfeições sutis para parecer desenho à mão */
         border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%;
     }

     /* Segunda camada de rabisco */
     .whatsapp-float::after {
         content: '';
         position: absolute;
         top: -12px;
         left: -12px;
         right: -12px;
         bottom: -12px;
         border: 1px solid var(--coral-primary);
         border-radius: 50%;
         opacity: 0;
         animation: drawCircle 8s ease-in-out infinite 2s;
         /* Imperfeições sutis para parecer desenho à mão */
         border-radius: 52% 48% 49% 51% / 51% 49% 48% 52%;
     }

     /* Animação de desenho circular */
     @keyframes drawCircle {
         0% {
             opacity: 0;
             stroke-dasharray: 0 200;
             transform: rotate(0deg) scale(0.8);
             border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%;
         }

         10% {
             opacity: 0.3;
             stroke-dasharray: 20 180;
         }

         50% {
             opacity: 0.7;
             stroke-dasharray: 100 100;
             transform: rotate(180deg) scale(1);
             border-radius: 52% 48% 51% 49% / 49% 51% 48% 52%;
         }

         80% {
             opacity: 0.5;
             stroke-dasharray: 180 20;
             transform: rotate(340deg) scale(1.05);
         }

         100% {
             opacity: 0;
             stroke-dasharray: 200 0;
             transform: rotate(360deg) scale(0.8);
             border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
         }
     }

     /* Animação de flutuação suave */
     @keyframes whatsappFloat {

         0%,
         100% {
             transform: translateY(0px);
             box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
         }

         50% {
             transform: translateY(-3px);
             box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
         }
     }

     .whatsapp-float:hover {
         background: linear-gradient(135deg, #128C7E, #075E54);
         transform: translateY(-2px) scale(1.05);
         box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
         animation-duration: 2s;
     }

     .whatsapp-float:hover::before {
         animation-duration: 3s;
         opacity: 0.8;
     }

     .whatsapp-float:hover::after {
         animation-duration: 4s;
         opacity: 0.6;
     }

     /* ================================
   ANIMAÇÕES
   ================================ */

     .fade-in {
         opacity: 0;
         transform: translateY(30px);
         transition: all 0.8s ease;
     }

     .fade-in.visible {
         opacity: 1;
         transform: translateY(0);
     }

     .slide-in-left {
         opacity: 0;
         transform: translateX(-50px);
         transition: all 0.8s ease;
     }

     .slide-in-left.visible {
         opacity: 1;
         transform: translateX(0);
     }

     .slide-in-right {
         opacity: 0;
         transform: translateX(50px);
         transition: all 0.8s ease;
     }

     .slide-in-right.visible {
         opacity: 1;
         transform: translateX(0);
     }

     .scale-in {
         opacity: 0;
         transform: scale(0.8);
         transition: all 0.8s ease;
     }

     .scale-in.visible {
         opacity: 1;
         transform: scale(1);
     }

     /* ================================
   RESPONSIVIDADE
   ================================ */

     /* Tablet Large (até 1024px) */
     @media (max-width: 1024px) {
         .hero-container {
             gap: 3rem;
         }
         
         .art-studio {
             width: 350px;
             height: 280px;
         }
         
         .canvas {
             width: 260px;
             height: 180px;
         }
         
         .services-grid {
             grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
             gap: 2rem;
         }
         
         .portfolio-grid {
             grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
             gap: 2rem;
         }
     }

     /* Tablet (até 768px) */
     @media (max-width: 768px) {
         .nav-links {
             display: none;
         }

         .mobile-menu-btn {
             display: flex;
         }

         .hero-container,
         .about-container,
         .contact-container {
             grid-template-columns: 1fr;
             gap: 3rem;
             text-align: center;
         }

         .hero-content h1 {
             font-size: 2.8rem;
         }

         .art-studio {
             width: 320px;
             height: 260px;
         }

         .canvas {
             width: 240px;
             height: 160px;
         }

         .services-grid,
         .portfolio-grid {
             grid-template-columns: 1fr;
         }

         .section {
             padding: 4rem 1rem;
         }

         .section-title {
             font-size: 2.2rem;
         }

         .mobile-nav-links {
             grid-template-columns: repeat(2, 1fr);
             gap: 0.8rem;
             max-width: 350px;
         }

         .mobile-nav-item {
             font-size: 0.9rem;
             padding: 1rem;
         }

         .navbar {
             padding: 0.8rem 1rem;
             left: 0;
             right: 0;
             width: 100vw;
             max-width: 100vw;
         }

         .logo {
             font-size: 2rem;
         }

         .logo .star {
             width: 28px;
             height: 28px;
             font-size: 1rem;
         }

         .process-step {
             flex-direction: column !important;
             text-align: center !important;
         }

         .process-number {
             margin: 0 0 1rem 0;
         }

         .timeline-line {
             display: none;
         }

         .testimonials-grid {
             grid-template-columns: 1fr;
         }

         .faq-container {
             padding: 0 1rem;
         }

         /* Melhorias para botões e formulários mobile */
         .fun-btn {
             padding: 1.2rem 2rem;
             font-size: 1.1rem;
             min-height: 48px;
         }

         .contact-item {
             padding: 1.2rem;
             margin-bottom: 1rem;
         }

         .contact-icon {
             width: 45px;
             height: 45px;
             font-size: 1.1rem;
         }

         .sketched-input {
             padding: 1rem;
             font-size: 16px; /* Evita zoom no iOS */
         }

         .submit-btn {
             padding: 1.5rem 2rem;
             font-size: 1.1rem;
             min-height: 48px;
         }

         /* Melhor espaçamento para cards */
         .service-card,
         .portfolio-item,
         .testimonial-card {
             padding: 2rem;
         }

         .stat-card {
             padding: 1.2rem;
         }

         .stat-number {
             font-size: 2.2rem;
         }

         /* Ajustes para WhatsApp float */
         .whatsapp-float {
             width: 56px;
             height: 56px;
             bottom: 20px;
             right: 20px;
         }
     }

     @media (max-width: 480px) {
         .hero {
             padding: 6rem 1rem 3rem;
         }

         .hero-content h1 {
             font-size: 2.4rem;
         }

         .art-studio {
             width: 280px;
             height: 220px;
         }

         .canvas {
             width: 200px;
             height: 140px;
         }

         .cta-buttons {
             flex-direction: column;
             align-items: center;
         }

         .fun-btn {
             padding: 1rem 1.5rem;
             font-size: 1rem;
         }

         .mobile-nav-links {
             grid-template-columns: 1fr;
             gap: 0.8rem;
             max-width: 280px;
         }

         .mobile-nav-item {
             font-size: 1rem;
             padding: 0.6rem;
         }

         .logo {
             font-size: 1.8rem;
         }

         .logo .star {
             width: 26px;
             height: 26px;
             font-size: 0.9rem;
         }

         .navbar {
             padding: 0.7rem 1rem;
         }


         .whatsapp-float {
             width: 52px;
             height: 52px;
             bottom: 20px;
             right: 20px;
             font-size: 24px;
         }

         /* Melhorias adicionais para small mobile */
         .hero-description {
             font-size: 1rem;
             padding: 1.5rem;
         }

         .hero-subtitle {
             font-size: 1.2rem;
         }

         .service-card h3 {
             font-size: 1.4rem;
         }

         .service-icon {
             font-size: 3rem;
         }

         .portfolio-info h4 {
             font-size: 1.2rem;
         }

         .testimonial-content {
             font-size: 1rem;
         }

         .faq-question {
             font-size: 1rem;
             padding: 1.2rem 1.5rem;
         }

         .faq-answer {
             padding: 0 1.5rem 1.2rem;
         }

         .contact-item {
             padding: 1rem;
         }

         .form-container {
             padding: 2rem;
         }

         .form-container h3 {
             font-size: 1.6rem;
         }

         .contact-info h3 {
             font-size: 1.8rem;
         }

         /* Ajustes para seções com melhor espaçamento */
         .about,
         .contact,
         .portfolio,
         .process,
         .testimonials,
         .cta-section {
             margin: 2rem 0;
             padding: 3rem 1rem;
         }

         .section {
             padding: 3rem 1rem;
         }

         .section-title {
             font-size: 2rem;
             margin-bottom: 1rem;
         }

         .section-subtitle {
             font-size: 1.1rem;
             margin-bottom: 2rem;
         }

         .about-stats {
             gap: 1rem;
         }

         .footer {
             padding: 3rem 1rem;
         }

         .footer-container {
             gap: 2rem;
         }

         .footer-section h3 {
             font-size: 1.5rem;
         }
     }

     /* Breakpoint adicional para telas muito pequenas */
     @media (max-width: 360px) {
         .hero-content h1 {
             font-size: 2rem;
         }

         .hero-subtitle {
             font-size: 1.1rem;
         }

         .hero-description {
             font-size: 0.95rem;
             padding: 1.2rem;
         }

         .section-title {
             font-size: 1.8rem;
         }

         .logo {
             font-size: 1.6rem;
         }

         .logo .star {
             width: 24px;
             height: 24px;
             font-size: 0.8rem;
         }

         .mobile-nav-item {
             font-size: 0.9rem;
             padding: 1rem;
         }

         .fun-btn {
             padding: 1rem 1.5rem;
             font-size: 0.95rem;
         }

         .service-card,
         .portfolio-item,
         .testimonial-card {
             padding: 1.5rem;
         }

         .stat-card {
             padding: 1rem;
         }

         .stat-number {
             font-size: 2rem;
         }

         .whatsapp-float {
             width: 48px;
             height: 48px;
             bottom: 16px;
             right: 16px;
             font-size: 22px;
         }
     }