* {margin: 0;padding: 0;box-sizing: border-box} html, body {height: 100%;width: 100%;overflow-x: hidden} body {font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;background-color: #F4F4F4;color: #363636;line-height: 1.6;font-weight: 400 !important} .container {max-width: 1200px;margin: 0 auto;padding: 0 20px}  .navbar {position: fixed;top: 0;left: 0;width: 100%;background: rgba(244, 244, 244, 0.95);backdrop-filter: blur(10px);z-index: 1000;padding: 15px 0;border-bottom: 2px solid #2A7C9D} .nav-container {max-width: 1200px;margin: 0 auto;padding: 0 20px;display: flex;justify-content: space-between;align-items: center} .nav-logo .logo {height: 50px;width: auto} .nav-menu {display: flex;list-style: none;gap: 30px;align-items: center} .nav-link,.nav-link:link,.nav-link:visited,.nav-link:hover,.nav-link:active,.nav-link:focus,.nav-link:target,a.nav-link,a.nav-link:link,a.nav-link:visited,a.nav-link:hover,a.nav-link:active,a.nav-link:focus {font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;font-weight: bold !important;font-size: 18px !important;font-style: normal !important;font-variant: normal !important;text-decoration: none !important;text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;-moz-osx-font-smoothing: grayscale !important;transition-property: transform,text-shadow,color,background-color,opacity,box-shadow !important;transition-duration: 0.3s !important;transition-timing-function: ease !important;will-change: transform,opacity !important} .nav-link {color: #2A7C9D} .nav-link:hover {color: #2A7C9D;transform: translateY(-2px);text-shadow: 0 2px 4px rgba(42, 124, 157, 0.3)} .nav-link:active {color: #2A7C9D;transform: translateY(0px);text-shadow: none} .nav-link:focus {color: #2A7C9D;outline: 2px solid #2A7C9D;outline-offset: 2px} .nav-link:visited {color: #2A7C9D} .btn-contratar,.btn-contratar:link,.btn-contratar:visited,.btn-contratar:hover,.btn-contratar:active,.btn-contratar:focus {font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;font-weight: bold !important;font-size: 18px !important;font-style: normal !important;text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;-moz-osx-font-smoothing: grayscale !important;transition-property: transform,box-shadow,color,background-color,border-color,opacity !important;transition-duration: 0.3s !important;transition-timing-function: ease !important;will-change: transform,opacity !important} .btn-contratar {background: #FEFEFE;color: #000 !important;padding: 10px 20px;border-radius: 25px;border: 2px solid #E07A4A} .btn-contratar:hover {background: #2A7C9D;color: #FEFEFE !important;transform: translateY(-2px);box-shadow: 0 4px 8px rgba(224, 122, 74, 0.3)} .hamburger {display: none;flex-direction: column;cursor: pointer} .hamburger span {width: 25px;height: 3px;background: #2A7C9D;margin: 3px 0;transition: 0.3s}  .hero-section {padding: 120px 0 80px;text-align: center;position: relative;background: #F4F4F4;min-height: 100vh;display: flex;align-items: center;justify-content: center} .hero-content {width: 100%;max-width: 1200px;margin: 0 auto;padding: 0 20px;position: relative;z-index: 2} .hero-illustration {position: relative;margin-bottom: 40px;height: 200px;display: flex;align-items: center;justify-content: center} .decorative-row {display: flex;align-items: center;gap: 30px;justify-content: center} .hero-video {width: 100%;max-width: 600px;height: 200px;object-fit: cover;border-radius: 15px} .circle {width: 60px;height: 60px;background: #2A7C9D;border-radius: 50%} .block {width: 80px;height: 60px;border-radius: 30px 30px 0 0} .block.pink {background: #2A7C9D} .block.green {background: #11FF00} .star {width: 60px;height: 60px;background: #2A7C9D;clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);transform: rotate(-15deg)} .hero-title {font-family: 'Koblenz-Serial-ExtraBold', 'Koblenz-Fallback', 'Arial Black', 'Helvetica Neue Bold', 'Impact', sans-serif !important;font-size: 2.5rem;color: #363636;margin-bottom: 20px;text-align: center;max-width: 800px;margin-left: auto;margin-right: auto;font-weight: 900 !important} .hero-description {font-size: 1.2rem;color: #363636;max-width: 600px;margin: 0 auto;line-height: 1.8} .wave-border {position: absolute;bottom: 0;left: 0;width: 100%;height: 50px;background: #2A7C9D;clip-path: polygon(0 100%, 100% 100%, 100% 0, 75% 50%, 50% 0, 25% 50%, 0 0)}  section {padding: 80px 0;position: relative;width: 100%} .section-title {font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;font-size: 2.5rem;color: #2A7C9D;text-align: center;margin-bottom: 10px;position: relative;font-weight: 400 !important} .section-title::after {content: '';position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);width: 100px;height: 3px;background: #2A7C9D} .section-subtitle {font-family: 'KG Red Hands', cursive;font-size: 1.2rem;color: #363636;text-align: center;margin-bottom: 50px;font-style: italic}  .personagens-section {background: #F4F4F4} .video-demo {margin-bottom: 50px} .video-placeholder {width: 100%;max-width: 600px;height: 300px;background: linear-gradient(45deg, #2A7C9D, #E07A4A);border-radius: 15px;margin: 0 auto;position: relative;overflow: hidden} .play-button {font-size: 4rem;color: #FEFEFE;cursor: pointer;transition: transform 0.3s ease} .play-button:hover {transform: scale(1.2)} .tools-showcase {display: flex;justify-content: center;align-items: center;gap: 30px;margin-top: 40px} .tools-logos {display: flex;gap: 40px} .tool-logo {display: flex;flex-direction: column;align-items: center;gap: 10px} .tool-icon {width: 60px;height: 60px;background: #FEFEFE;border-radius: 10px;padding: 10px;box-shadow: 0 4px 8px rgba(0,0,0,0.1)} .arrow-left, .arrow-right {width: 40px;height: 40px;background: #2A7C9D;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #FEFEFE;font-size: 1.5rem;cursor: pointer;transition: transform 0.3s ease} .arrow-left:hover, .arrow-right:hover {transform: scale(1.1)}  .ilustracao-section {background: #F4F4F4} .headline {font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;font-size: 1.5rem;color: #363636;text-align: center;margin-bottom: 20px;font-weight: 400 !important} .main-title.koblenz {font-family: 'Koblenz-Serial-ExtraBold', 'Koblenz-Fallback', 'Arial Black', 'Helvetica Neue Bold', 'Impact', sans-serif !important;font-size: 3.5rem;color: #2A7C9D;text-align: center;margin-bottom: 50px;font-weight: 900 !important} .three-columns {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 40px;margin-bottom: 50px} .column {text-align: center;padding: 30px;background: #FEFEFE;border-radius: 15px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);transition: transform 0.3s ease} .column:hover {transform: translateY(-5px)} .column h4 {font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;font-size: 1.5rem;color: #2A7C9D;margin-bottom: 15px;font-weight: 400 !important} .column p {color: #363636;line-height: 1.8} .cta-center {text-align: center} .btn-projeto {background: #E07A4A;color: #FEFEFE;border: none;padding: 15px 30px;font-size: 1.2rem;font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;border-radius: 25px;cursor: pointer;transition: all 0.3s ease;box-shadow: 0 4px 15px rgba(224, 122, 74, 0.3);font-weight: 400 !important} .btn-projeto:hover {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(224, 122, 74, 0.4)}  .modal {display: none;position: fixed;z-index: 2000;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);backdrop-filter: blur(5px)} .modal-content {background-color: #FEFEFE;margin: 5% auto;padding: 40px;border-radius: 15px;width: 90%;max-width: 500px;max-height: 90vh;overflow-y: auto;position: relative;box-shadow: 0 10px 30px rgba(0,0,0,0.3)} .close {position: absolute;right: 20px;top: 15px;font-size: 2rem;cursor: pointer;color: #2A7C9D} .close:hover {color: #363636} .project-form {display: flex;flex-direction: column;gap: 20px} .form-group {display: flex;flex-direction: column;gap: 8px} .form-group label {font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;font-weight: bold;color: #363636} .form-group input, .form-group select {padding: 12px;border: 2px solid #D9C9B6;border-radius: 8px;font-size: 1rem;transition: border-color 0.3s ease} .form-group input:focus, .form-group select:focus, .form-group textarea:focus {outline: none;border-color: #2A7C9D} .form-group textarea {padding: 12px;border: 2px solid #D9C9B6;border-radius: 8px;font-size: 1rem;font-family: inherit;resize: vertical;min-height: 80px;transition: border-color 0.3s ease} .btn-submit {background: #E07A4A;color: #FEFEFE;border: none;padding: 15px;border-radius: 8px;font-size: 1.1rem;font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;cursor: pointer;transition: all 0.3s ease;font-weight: 400 !important} .btn-submit:hover {background: #E07A4A;transform: translateY(-2px)}  .projetos-section {background: #F4F4F4} .projetos-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px} .projeto-card {position: relative;border-radius: 15px;overflow: hidden;box-shadow: 0 4px 15px rgba(0,0,0,0.1);transition: transform 0.3s ease;display: flex;align-items: center;justify-content: center;background: #fff;padding: 10px} .projeto-card:hover {transform: translateY(-10px)} .projeto-card img {width: 100%;height: auto;object-fit: contain;border-radius: 10px;transition: transform 0.3s ease} .projeto-card:hover img {transform: scale(1.05)} .card-overlay {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(transparent, rgba(42, 124, 157, 0.9));color: #FEFEFE;padding: 20px;transform: translateY(100%);transition: transform 0.3s ease} .projeto-card:hover .card-overlay {transform: translateY(0)}  .galeria-section {background: #F4F4F4} .galeria-container {position: relative;max-width: 1000px;margin: 0 auto} .galeria-wrapper {overflow: hidden;border-radius: 15px} .galeria-track {display: flex;justify-content: flex-start;align-items: center;gap: 20px;transition: transform 0.3s ease} .galeria-item {flex: 0 0 300px;border-radius: 10px;overflow: hidden;box-shadow: 0 4px 15px rgba(0,0,0,0.1);transition: transform 0.3s ease;opacity: 1;transform: scale(1);background: #f8f8f8;min-height: 250px;display: flex;align-items: center;justify-content: center} .galeria-item:hover {transform: scale(1.05)} .galeria-item img {width: 100%;height: 250px;object-fit: cover;cursor: pointer;transition: opacity 0.3s ease} .galeria-item img[loading] {opacity: 0.7} .galeria-item img.loaded {opacity: 1}  .galeria-loading {text-align: center;padding: 40px 20px} .loading-spinner {width: 40px;height: 40px;border: 4px solid #f3f3f3;border-top: 4px solid #2A7C9D;border-radius: 50%;animation: spin 1s linear infinite;margin: 0 auto 20px} @keyframes spin {0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} } .galeria-nav {position: absolute;top: 50%;transform: translateY(-50%);background: #2A7C9D;color: #FEFEFE;border: none;width: 50px;height: 50px;border-radius: 50%;font-size: 1.5rem;cursor: pointer;transition: all 0.3s ease;z-index: 10} .galeria-nav.prev {left: -25px} .galeria-nav.next {right: -25px} .galeria-nav:hover {background: #E07A4A;transform: translateY(-50%) scale(1.1)} .galeria-nav:disabled {opacity: 0.5;cursor: not-allowed;pointer-events: none}  .lightbox {display: none;position: fixed;z-index: 3000;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.9);backdrop-filter: blur(5px)} .lightbox img {max-width: 90%;max-height: 90%;margin: auto;display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 3px solid #2A7C9D;border-radius: 10px} .lightbox-close {position: absolute;top: 20px;right: 30px;color: #FEFEFE;font-size: 3rem;cursor: pointer;z-index: 3001}  .ilustradora-section {background: #F4F4F4;padding: 100px 0;text-align: center}   .footer {background: #363636;color: #FEFEFE;padding: 60px 0 20px} .footer-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 40px;margin-bottom: 40px} .footer-section h4 {font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;color: #2A7C9D;margin-bottom: 20px;font-size: 1.3rem;font-weight: 400 !important} .social-links {display: flex;gap: 8px;flex-wrap: wrap;align-items: center} .social-link {display: inline-block;transition: transform 0.3s ease} .social-link:hover {transform: translateY(-3px)} .social-link img {width: 20px;height: 20px;filter: brightness(0) invert(1);object-fit: contain;object-position: center} .newsletter-form {display: flex;gap: 10px;flex-wrap: wrap} .newsletter-form input {flex: 1;min-width: 200px;padding: 10px;border: none;border-radius: 5px;font-size: 1rem} .newsletter-form button {background: #E07A4A;color: #FEFEFE;border: none;padding: 10px 20px;border-radius: 5px;cursor: pointer;font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;transition: background 0.3s ease;font-weight: 400 !important} .newsletter-form button:hover {background: #E07A4A} .footer-bottom {text-align: center;padding-top: 20px;border-top: 1px solid #555;color: #999}  @media (max-width: 768px) {.nav-link,.nav-link:link,.nav-link:visited,.nav-link:hover,.nav-link:active,.nav-link:focus,.nav-link:target,a.nav-link,a.nav-link:link,a.nav-link:visited,a.nav-link:hover,a.nav-link:active,a.nav-link:focus {font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;font-weight: bold !important;font-size: 18px !important;font-style: normal !important;font-variant: normal !important;text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;-moz-osx-font-smoothing: grayscale !important;transition-property: transform,text-shadow,color,background-color,opacity,box-shadow !important;transition-duration: 0.3s !important;transition-timing-function: ease !important;will-change: transform,opacity !important} .btn-contratar,.btn-contratar:link,.btn-contratar:visited,.btn-contratar:hover,.btn-contratar:active,.btn-contratar:focus {font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;font-weight: bold !important;font-size: 18px !important;font-style: normal !important;text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;-moz-osx-font-smoothing: grayscale !important;transition-property: transform,box-shadow,color,background-color,border-color,opacity !important;transition-duration: 0.3s !important;transition-timing-function: ease !important;will-change: transform,opacity !important} .nav-menu {display: none;position: absolute;top: 100%;left: 0;width: 100%;background: rgba(244, 244, 244, 0.98);flex-direction: column;padding: 20px;gap: 15px} .nav-menu.active {display: flex} .hamburger {display: flex} .hero-title {font-size: 2rem} .main-title.koblenz {font-size: 2.5rem} .decorative-row {flex-wrap: wrap;gap: 15px} .hero-video {max-width: 100%;height: 150px} .circle, .block, .star {width: 50px;height: 50px} .three-columns {grid-template-columns: 1fr} .tools-showcase {flex-direction: column;gap: 20px} .tools-logos {flex-direction: column;gap: 20px} .galeria-nav {width: 40px;height: 40px;font-size: 1.2rem} .galeria-nav.prev {left: -20px} .galeria-nav.next {right: -20px}  .footer-content {grid-template-columns: 1fr;text-align: center} .social-links {justify-content: center} } @media (max-width: 480px) {.nav-link,.nav-link:link,.nav-link:visited,.nav-link:hover,.nav-link:active,.nav-link:focus,.nav-link:target,a.nav-link,a.nav-link:link,a.nav-link:visited,a.nav-link:hover,a.nav-link:active,a.nav-link:focus {font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;font-weight: bold !important;font-size: 18px !important;font-style: normal !important;font-variant: normal !important;text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;-moz-osx-font-smoothing: grayscale !important;transition-property: transform,text-shadow,color,background-color,opacity,box-shadow !important;transition-duration: 0.3s !important;transition-timing-function: ease !important;will-change: transform,opacity !important} .btn-contratar,.btn-contratar:link,.btn-contratar:visited,.btn-contratar:hover,.btn-contratar:active,.btn-contratar:focus {font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;font-weight: bold !important;font-size: 18px !important;font-style: normal !important;text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;-moz-osx-font-smoothing: grayscale !important;transition-property: transform,box-shadow,color,background-color,border-color,opacity !important;transition-duration: 0.3s !important;transition-timing-function: ease !important;will-change: transform,opacity !important} .container {padding: 0 15px} .hero-title {font-size: 1.8rem} .section-title {font-size: 2rem} .main-title.koblenz {font-size: 2rem} .modal-content {margin: 10% auto;padding: 20px} .hero-video {height: 120px}  }  .card-overlay h4, .card-overlay p {display: none}  .ilustradora-title {font-family: 'KG Red Hands', 'KG-Red-Hands-Fallback', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive !important;font-size: 4rem;font-weight: bold;font-style: italic;color: #2A7C9D;text-align: center;margin-bottom: 30px;text-shadow: 2px 2px 4px rgba(42, 124, 157, 0.3)}  @media (max-width: 768px) {.ilustradora-title {font-size: 3rem} } @media (max-width: 480px) {.ilustradora-title {font-size: 2.5rem} }