/* Contentor com parallax fixo sem JavaScript */
     
     .hero-section-designer {
         position: relative;
         min-height: 80vh;
         /* Imagem fixa na janela cria o efeito ao fazer o scroll */
         background: radial-gradient(circle at 30% 50%, rgba(110, 2, 2, 0.4), transparent 60%), radial-gradient(circle at 80% 40%, rgba(13, 22, 41, 0.3), transparent 60%), linear-gradient(rgba(5, 5, 15, 0.65), rgba(5, 5, 15, 0.65)), url('./../img/identidade-visual.jpg') center/cover no-repeat;
         background-attachment: fixed;
     }
     /* Card Transparente com Glassmorphism */
     
     .glass-card {
         background: rgba(10, 15, 30, 0.45);
         border: 1px solid rgba(255, 255, 255, 0.15);
         backdrop-filter: blur(8px);
         transition: transform 0.3s ease;
     }
     /* Leve efeito hover no card sem JS */
     
     .glass-card:hover {
         transform: translateY(-5px);
     }
     /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
     
     .design-steps-section {
         padding: 20px 0;
         position: relative;
     }
     /* Estilização da Imagem / Caixa de Pré-visualização à Esquerda */
     
     .preview-box {
         background-color: #ffffff;
         border-radius: 12px;
         padding: 20px 30px;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
         display: inline-block;
         color: #333;
         font-weight: 500;
         border: 1px solid #f0f0f0;
         max-width: 100%;
         word-wrap: break-word;
     }
     /* Estrutura da Timeline */
     
     .timeline-container {
         position: relative;
         padding-left: 0;
     }
     /* Linha Pontilhada Conectora */
     
     .timeline-container::before {
         content: '';
         position: absolute;
         top: 25px;
         bottom: 25px;
         left: 29px;
         /* Posição centralizada para ícone de 60px */
         width: 2px;
         border-left: 2px dashed #e02424;
         z-index: 1;
     }
     /* Item Individual da Timeline */
     
     .timeline-item {
         position: relative;
         display: flex;
         align-items: flex-start;
         gap: 20px;
         margin-bottom: 35px;
         z-index: 2;
     }
     
     .timeline-item:last-child {
         margin-bottom: 0;
     }
     /* Círculo com o Ícone */
     
     .timeline-icon {
         width: 60px;
         height: 60px;
         min-width: 60px;
         border-radius: 50%;
         background-color: #e02424;
         color: #ffffff;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.5rem;
         box-shadow: 0 4px 12px rgba(224, 36, 36, 0.3);
         flex-shrink: 0;
     }
     /* Conteúdo do Passo */
     
     .timeline-content {
         padding-top: 5px;
         flex-grow: 1;
     }
     
     .timeline-title {
         font-weight: 700;
         font-size: 1.25rem;
         color: #1a1a1a;
         margin-bottom: 6px;
     }
     
     .timeline-text {
         font-size: 0.95rem;
         line-height: 1.6;
         color: #666666;
         margin: 0;
     }
     /* --- Ajustes Responsivos (Media Queries) --- */
     /* Tablets e Computadores (>= 768px) */
     
     @media (min-width: 768px) {
         .design-steps-section {
             padding: 10px 0;
         }
         .timeline-item {
             gap: 25px;
             margin-bottom: 45px;
         }
     }
     /* Telemóveis Pequenos (< 576px) */
     
     @media (max-width: 575.98px) {
         .timeline-container::before {
             left: 24px;
             /* Ajuste da linha para ícones menores */
             top: 20px;
             bottom: 20px;
         }
         .timeline-icon {
             width: 50px;
             height: 50px;
             min-width: 50px;
             font-size: 1.25rem;
         }
         .timeline-title {
             font-size: 1.1rem;
         }
         .timeline-text {
             font-size: 0.88rem;
         }
         .preview-box {
             padding: 15px 20px;
             font-size: 0.95rem;
         }
     }
     /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
     
     .service-card-designer {
         padding: 0.1rem;
         border-radius: 12px;
         transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
     }
     
     .service-card-designer:hover {
         transform: translateY(-8px);
         box-shadow: 0 12px 24px rgba(236, 236, 236, 0);
     }
     /* Animação nos Ícones ao passar o mouse no card */
     
     .service-card-designer .icon-box i {
         display: inline-block;
         transition: transform 0.3s ease;
     }
     
     .service-card-designer:hover .icon-box i {
         transform: scale(1.15) rotate(-5deg);
     }
     
     .service-title {
         font-weight: 800;
         color: #dfdfdf;
         letter-spacing: 0.5px;
         margin-bottom: 0.25rem;
     }
     
     .service-price {
         display: inline-block;
         font-size: 0.95rem;
         font-weight: 700;
         color: #d40000;
         background-color: #f0edff;
         padding: 3px 12px;
         border-radius: 20px;
         margin-bottom: 0.75rem;
         transition: background-color 0.3s ease, color 0.3s ease;
     }
     
     .service-card-designer:hover .service-price {
         background-color: #d40000;
         color: #fff;
     }
     
     .service-text {
         font-size: 0.95rem;
         line-height: 1.6;
         margin-bottom: 1rem;
         color: #fff;
     }
     /* Botão Solicitar Agora */
     
     .btn-solicitar {
         background-color: #d40000;
         color: #fff;
         font-weight: 600;
         font-size: 0.85rem;
         padding: 8px 18px;
         border-radius: 6px;
         border: none;
         transition: all 0.2s ease-in-out;
         text-decoration: none;
         display: inline-block;
     }
     
     .btn-solicitar:hover {
         background-color: #a80202;
         color: #fff;
         box-shadow: 0 4px 10px rgba(180, 2, 2, 0.25);
         transform: translateY(-2px);
     }
     /* Estilização dos ícones */
     
     .icon-box {
         width: 70px;
         height: 70px;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
         border-radius: 12px;
         background-color: #f8f9fa;
         transition: background-color 0.3s ease;
     }
     
     .icon-circle {
         background-color: #d40000;
         border-radius: 50%;
         color: #fff;
     }
     /* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
     
     .pillars-section {
         position: relative;
         padding: 80px 0;
     }
     /* Estilização dos números circulares */
     
     .number-badge {
         width: 90px;
         height: 90px;
         min-width: 90px;
         border-radius: 50%;
         background: linear-gradient(135deg, #ffb338 0%, #ff5e36 100%);
         color: #ffffff;
         font-size: 2.2rem;
         font-weight: 800;
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
         box-shadow: 0 10px 25px rgba(255, 94, 54, 0.3);
     }
     /* Ponto branco/laranja no topo direito do círculo */
     
     .number-badge::after {
         content: '';
         position: absolute;
         top: 6px;
         right: 6px;
         width: 18px;
         height: 18px;
         border-radius: 50%;
         background-color: #ff5e36;
         border: 3px solid #ffffff;
     }
     /* Títulos dos Pilares */
     
     .pillar-title {
         font-weight: 800;
         color: #adadad;
         font-size: 1.4rem;
         margin-bottom: 0.75rem;
         letter-spacing: -0.5px;
     }
     /* Texto descritivo */
     
     .pillar-text {
         font-size: 0.92rem;
         line-height: 1.6;
         color: #cac8c8;
         margin-bottom: 0;
     }
     
     .pillar-text strong {
         color: #444;
     }
     /* Elemento decorativo 3D à direita */
     /* Container com perspectiva para intensificar o efeito 3D */
     
     .sphere-container {
         position: fixed;
         right: -30px;
         top: 25%;
         width: 250px;
         height: 250px;
         pointer-events: auto;
         /* Permite interagir com o mouse */
         perspective: 1000px;
         will-change: transform;
         z-index: 99;
     }
     
     .ring-3d {
         position: absolute;
         width: 200px;
         height: 200px;
         border: 16px solid rgba(252, 161, 161, 0.85);
         border-radius: 50%;
         /* Mistura rotação de scroll + inclinação do mouse */
         transform: rotateX(calc(70deg + var(--mouse-y, 0deg) + var(--scroll, 0) * 0.1deg)) rotateY(calc(-20deg + var(--mouse-x, 0deg) + var(--scroll, 0) * 0.25deg)) rotateZ(calc(var(--scroll, 0) * 0.2deg));
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), inset 0 0 15px rgba(221, 248, 245, 0.5);
         transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
     
     .sphere-3d {
         position: absolute;
         top: 30px;
         left: 45px;
         width: 110px;
         height: 110px;
         border-radius: 50%;
         background: radial-gradient(circle at 35% 35%, #f5ebff 0%, #ff1e1e 55%, #b30000 100%);
         /* Move a esfera em sentido oposto ao anel para criar profundidade parallax */
         transform: translate3d(calc(var(--mouse-x, 0px) * -0.5), calc(var(--mouse-y, 0px) * -0.5 + var(--scroll, 0) * -0.12px), 20px);
         box-shadow: inset -10px -10px 25px rgba(0, 0, 0, 0.4), 0 15px 35px rgba(255, 7, 7, 0.4);
         transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
     /* Efeito ao passar o mouse por cima */
     
     .sphere-container:hover .sphere-3d {
         filter: brightness(1.1);
         box-shadow: inset -10px -10px 25px rgba(0, 0, 0, 0.3), 0 20px 45px rgba(255, 7, 7, 0.6);
     }