App Ayuntamiento de Laldea

Desarrollo de una aplicación municipal para centralizar información, avisos, servicios y comunicación con la ciudadanía de l’Aldea.

:root { --jc-teal: #00b894; --jc-teal-700: #008d73; --jc-teal-100: #e6f7f4; --jc-teal-50: #f3fbfa; --jc-black: #111111; --jc-ink: #171a1f; --jc-slate: #5b5d63; --jc-muted: #80858f; --jc-line: #e9ecef; --jc-soft: #f5f7f9; --jc-white: #ffffff; --jc-shadow: 0 18px 60px rgba(17, 17, 17, 0.08); --jc-shadow-sm: 0 8px 24px rgba(17, 17, 17, 0.07); --jc-radius: 16px; --jc-radius-lg: 24px; --jc-radius-xl: 34px; --jc-max: 1280px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--jc-white); color: var(--jc-ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } svg { display: block; } .jc-software-page, .jc-software-page * { box-sizing: border-box; } .jc-software-page { position: relative; overflow: hidden; background: var(--jc-white); } .jc-container { position: relative; z-index: 2; width: min( var(--jc-max), calc(100% - 40px) ); margin: auto; } .jc-section { position: relative; padding: 104px 0; border-top: 1px solid var(--jc-line); background: var(--jc-white); overflow: hidden; } .jc-grid { display: grid; gap: 22px; } .jc-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jc-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .jc-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .jc-section-header { max-width: 840px; margin-bottom: 54px; } .jc-section-header.center { margin-inline: auto; text-align: center; } .jc-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; color: var(--jc-teal-700); font-size: 12px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; } .jc-kicker::before { width: 7px; height: 7px; border-radius: 50%; background: var(--jc-teal); content: ""; } .jc-title-xl { max-width: 1080px; margin: 0; font-size: clamp(50px, 7vw, 88px); font-weight: 720; letter-spacing: -0.065em; line-height: 0.96; } .jc-title-lg { margin: 0; font-size: clamp(36px, 4.8vw, 62px); font-weight: 680; letter-spacing: -0.05em; line-height: 1.02; } .jc-title-md { margin: 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 680; letter-spacing: -0.04em; line-height: 1.08; } .jc-lead { max-width: 790px; margin: 24px 0 0; color: var(--jc-slate); font