:root { 
    --primary: #1DB2C4; 
    --grad: linear-gradient(90deg, #1DB2C4, #76D351); 
    --dark: #111; 
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }

body { background: #fcfcfc; }

.navbar-container { display: flex; justify-content: space-between; align-items: center; padding: 12px 5%; background: white; border-bottom: 1px solid #eee; }
.btn-sac-top { background: var(--grad); color: white; padding: 8px 16px; font-size: 0.75rem; border-radius: 50px; text-decoration: none; font-weight: 800; }

#userProfile { padding: 20px 5%; background: #fff; border-bottom: 1px solid #f0f0f0; }
.btn-profile-services { background: var(--grad); border: none; padding: 10px 15px; border-radius: 12px; color: white; font-weight: 800; font-size: 0.65rem; cursor: pointer; }
.btn-exit { font-size: 0.7rem; color: #ff4d4d; font-weight: 800; cursor: pointer; text-decoration: underline; }

.header { text-align: center; padding: 25px 10%; background: #fff; }
.header h1 { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 1.6rem; font-weight: 800; }

.quick-menu-grid { display: grid; grid-template-columns: 1fr; gap: 15px; padding: 20px 5%; }
.btn-main-app { display: flex; flex-direction: column; align-items: center; padding: 25px; border-radius: 24px; text-decoration: none; }
.btn-main-app.primary { background: var(--grad); color: white; }
.btn-main-app.secondary { background: white; border: 1px solid #eee; color: var(--dark); }
.icon-circle { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.secondary .icon-circle { background: var(--grad); }

.mural-container { display: flex; justify-content: center; margin: 15px 0; }
#muralPill { background: rgba(29, 178, 196, 0.1); padding: 8px 20px; border-radius: 50px; }
#muralTexto { font-size: 0.8rem; font-weight: 600; color: #157e8c; }

.faq-carrossel { display: flex; overflow-x: auto; gap: 15px; padding: 10px 20px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.faq-card-full { min-width: 280px; background: white; padding: 20px; border-radius: 20px; border: 2px solid #1DB2C4; scroll-snap-align: center; }
.faq-q { font-weight: 800; color: var(--primary); margin-bottom: 8px; }

.ouvidoria-section { padding: 20px 5%; display: flex; flex-direction: column; gap: 12px; }
.btn-ouvidoria { 
    background: white; padding: 15px; border-radius: 16px; font-weight: 800; text-align: center; cursor: pointer;
    border: 3px solid transparent; background-image: linear-gradient(white, white), var(--grad);
    background-origin: border-box; background-clip: content-box, border-box;
}

.main-footer { background: var(--grad); padding: 30px; text-align: center; color: white; margin-top: 20px; }

/* Modal 100% */
.full-screen { width: 100vw !important; height: 100vh !important; max-width: 100vw !important; position: fixed; top:0; left:0; border-radius:0 !important; }
.modal-header-serv { background: var(--grad); color: white; padding: 30px 20px; display: flex; justify-content: space-between; align-items: center; }
.ticket-item { background: #f8fafc; padding: 15px; border-radius: 15px; border: 1px solid #e2e8f0; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.btn-copy { background: var(--primary); color: white; border: none; padding: 8px; border-radius: 8px; font-size: 0.7rem; font-weight: 800; }

#modalLogin, #modalServicos, #modalConfirm { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); display:none; align-items:center; justify-content:center; z-index:9999; }
.modal-content { background: white; border-radius: 20px; overflow: hidden; width: 90%; max-width: 400px; }