:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #102017; color: #fff; }
.portal { min-height: 100svh; position: relative; display: grid; align-items: center; overflow: hidden; background: #102017; }
.portal__image { position: absolute; inset: 0; background: url('./assets/hero-oficinas-fomento.png') center / cover no-repeat; }
.portal__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 22, 15, .97) 0%, rgba(12, 29, 20, .90) 42%, rgba(12, 29, 20, .35) 74%, rgba(12, 29, 20, .12) 100%); }
.portal__content { position: relative; width: min(100% - 48px, 610px); margin: 48px clamp(24px, 10vw, 170px); }
.brand { display: block; width: min(100%, 490px); height: auto; margin-bottom: 36px; filter: brightness(0) invert(1); }
.eyebrow { margin: 0 0 12px; color: #f6c762; letter-spacing: .18em; font-size: .72rem; font-weight: 700; }
h1 { margin: 0; font-size: clamp(2.2rem, 4vw, 4rem); letter-spacing: -.04em; }
.intro { margin: 13px 0 30px; max-width: 430px; color: #dae5dc; font-size: 1.05rem; line-height: 1.55; }
.apps { display: grid; width: 70%; gap: 12px; }
.app-card { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 15px; padding: 17px 18px; color: #fff; text-decoration: none; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 14px; backdrop-filter: blur(10px); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.app-card:hover, .app-card:focus-visible { transform: translateX(4px); border-color: #f6c762; background: rgba(255,255,255,.17); outline: none; }
.app-card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; }.app-card__icon svg { width: 29px; height: 29px; }
.app-card__icon--fomento { color: #fff; background: rgba(255,255,255,.12); }.app-card__icon--avita { color: #102017; background: #f6c762; }
.app-card__copy { display: grid; gap: 4px; }.app-card__copy strong { font-size: 1rem; }.app-card__copy small { color: #d7e0d9; font-size: .82rem; }.app-card__arrow { color: #f6c762; font-size: 1.5rem; }
footer { position: absolute; bottom: 22px; left: clamp(24px, 10vw, 170px); color: rgba(255,255,255,.62); font-size: .76rem; }
@media (max-width: 720px) { .portal__shade { background: linear-gradient(180deg, rgba(9,22,15,.83), rgba(9,22,15,.96)); }.portal__content { margin: 40px 24px 84px; width: auto; }.brand { width: min(100%, 360px); margin-bottom: 28px; }.apps { width: 100%; } footer { left: 24px; } }