:root { color-scheme: light; font-family: "Nunito", "Segoe UI", sans-serif; background: #f4f2f3; }
* { box-sizing: border-box; }
body { min-height: 100vh; min-height: 100svh; margin: 0; color: #29262b; background: #f4f2f3; }

.access-page {
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    grid-template-columns: minmax(360px, 42%) minmax(560px, 58%);
}

/* Portada institucional. */
.portal-intro {
    position: relative;
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(34px, 5vw, 72px);
    overflow: hidden;
    flex-direction: column;
    color: #fff;
    background:
        linear-gradient(150deg, rgba(117,26,60,.96), rgba(49,14,29,.98) 62%, #1e1219),
        #4a172b;
}

.portal-intro::before {
    content: "";
    position: absolute;
    width: 72%;
    height: 1px;
    top: 29%;
    right: -12%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.38));
    transform: rotate(-34deg);
}

.portal-intro::after {
    content: "SERVIR";
    position: absolute;
    right: -27px;
    bottom: 6%;
    color: rgba(255,255,255,.035);
    font-size: clamp(80px, 12vw, 180px);
    font-weight: 900;
    letter-spacing: 10px;
    line-height: 1;
}

.portal-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; }
.portal-brand img { width: 88px; height: auto; filter: drop-shadow(0 12px 24px rgba(0,0,0,.25)); }
.portal-brand span { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.3); font-size: 11px; font-weight: 900; letter-spacing: 3.2px; }

.portal-message { position: relative; z-index: 1; margin: auto 0; }
.portal-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; color: #e4cbd5; font-size: 11px; font-weight: 800; letter-spacing: .45px; }
.portal-message h1 { max-width: 590px; margin: 0; font-size: clamp(42px, 5.3vw, 76px); font-weight: 800; letter-spacing: -2.5px; line-height: .98; }
.portal-message h1 em { display: block; margin-top: 11px; color: #efb2c9; font-style: normal; }
.portal-message p { max-width: 470px; margin: 27px 0 0; color: #ddcad2; font-size: 15px; line-height: 1.75; }

.portal-signature { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.15); }
.portal-signature > span { color: #bfaab3; font-size: 11px; }
.portal-signature a { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: 12px; font-weight: 900; text-decoration: none; }
.portal-signature a:hover { color: #ffd2e2; }

/* Selector de accesos. */
.portal-options {
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(42px, 5vw, 72px) clamp(40px, 6vw, 96px) 28px;
    flex-direction: column;
    background:
        linear-gradient(rgba(63,49,57,.045) 1px, transparent 1px),
        #f7f5f6;
    background-size: 100% 82px;
}

.portal-options > header { margin-bottom: 34px; }
.portal-step { color: #9c536d; font-size: 10px; font-weight: 900; letter-spacing: 2px; }
.portal-options h2 { margin: 8px 0 7px; color: #29252b; font-size: clamp(28px, 3vw, 40px); letter-spacing: -1px; }
.portal-options > header p { margin: 0; color: #817980; font-size: 13px; }

.access-list { display: grid; gap: 15px; }
.access-option {
    --accent: #8e2148;
    --accent-rgb: 142,33,72;
    position: relative;
    display: grid;
    min-height: 132px;
    padding: 20px 22px;
    grid-template-columns: 40px 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    overflow: hidden;
    border: 1px solid #e3dde0;
    border-radius: 14px;
    color: #2c292e;
    background: rgba(255,255,255,.94);
    box-shadow: 0 10px 28px rgba(48,31,40,.055);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.access-option::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); }
.access-option::after { content: ""; position: absolute; width: 120px; height: 100%; right: -46px; top: 0; background: linear-gradient(135deg, transparent, rgba(var(--accent-rgb),.055)); transform: skewX(-18deg); pointer-events: none; }
.access-option-ministry { --accent: #245f91; --accent-rgb: 36,95,145; }
.access-option-annex { --accent: #b85a35; --accent-rgb: 184,90,53; }

a.access-option:hover { z-index: 1; transform: translateX(7px); border-color: rgba(var(--accent-rgb),.42); color: #2c292e; box-shadow: 0 16px 34px rgba(48,31,40,.12); }
.access-option-index { color: #b8afb4; font-size: 11px; font-weight: 900; letter-spacing: 1.3px; }
.access-option-icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 11px; color: var(--accent); background: rgba(var(--accent-rgb),.09); font-size: 26px; }
.access-option-copy { display: flex; min-width: 0; flex-direction: column; }
.access-option-copy small { margin-bottom: 4px; color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: 1.3px; text-transform: uppercase; }
.access-option-copy strong { color: #2b272d; font-size: 19px; line-height: 1.2; }
.access-option-copy > span { margin-top: 7px; color: #817981; font-size: 11px; line-height: 1.45; }
.access-option-go { position: relative; z-index: 1; display: flex; min-width: 94px; align-items: center; justify-content: flex-end; gap: 10px; color: var(--accent); font-size: 12px; font-weight: 900; }
.access-option-go i { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(var(--accent-rgb),.22); border-radius: 8px; transition: color .2s ease, background .2s ease; }
a.access-option:hover .access-option-go i { color: #fff; background: var(--accent); }
.access-option-soon { min-width: 125px; color: #817775; }

.portal-options footer { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: auto; padding-top: 24px; color: #9a9297; font-size: 10px; }
.access-option:focus-visible,
.portal-signature a:focus-visible { outline: 3px solid #b96483; outline-offset: 4px; }

@media (max-width: 980px) {
    .access-page { grid-template-columns: 1fr; }
    .portal-intro { min-height: 470px; padding: 34px; }
    .portal-message { margin: 58px 0; }
    .portal-message h1 { font-size: clamp(42px, 8vw, 65px); }
    .portal-options { min-height: auto; padding: 46px 34px 28px; }
    .portal-options footer { margin-top: 38px; }
}

@media (max-width: 620px) {
    .portal-intro { min-height: 440px; padding: 26px 22px; }
    .portal-brand img { width: 68px; }
    .portal-message { margin: 45px 0; }
    .portal-message h1 { font-size: 42px; }
    .portal-message p { margin-top: 20px; font-size: 13px; }
    .portal-signature { align-items: flex-start; flex-direction: column; gap: 8px; }
    .portal-options { padding: 38px 16px 24px; }
    .access-option { min-height: 150px; padding: 18px; grid-template-columns: 48px minmax(0,1fr); gap: 13px; }
    .access-option-index { position: absolute; top: 17px; right: 17px; }
    .access-option-icon { width: 46px; height: 46px; }
    .access-option-go { grid-column: 1 / 3; min-width: 0; justify-content: space-between; padding-top: 12px; border-top: 1px solid #ebe5e8; }
}