:root {
    color-scheme: dark;
    --portal-fondo: #111317;
    --portal-panel: #1b1d24;
    --portal-panel-suave: #22252d;
    --portal-borde: #373b43;
    --portal-texto: #f4f5f1;
    --portal-secundario: #a8abb2;
    --portal-acento: #a6b75b;
    --portal-acento-claro: #c4d17e;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
    background:
        linear-gradient(115deg, rgba(13, 15, 18, .94), rgba(17, 19, 23, .72)),
        url("/fondo-login.png") center / cover fixed;
    color: var(--portal-texto);
    font-family: Inter, Arial, Helvetica, sans-serif;
}

button,
input {
    font: inherit;
}

[hidden] {
    display: none !important;
}

.portalAcceso {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr);
    min-height: 100vh;
}

.portalPresentacion {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    padding: clamp(36px, 6vw, 82px);
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.portalLogo {
    width: min(230px, 60%);
    height: auto;
}

.portalPresentacionTexto {
    max-width: 650px;
    padding: 64px 0;
}

.portalEtiqueta {
    margin: 0 0 16px;
    color: var(--portal-acento);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.portalPresentacion h1 {
    max-width: 620px;
    margin: 0;
    font-size: clamp(42px, 6vw, 76px);
    font-weight: 650;
    letter-spacing: -.045em;
    line-height: 1.02;
}

.portalDescripcion {
    max-width: 570px;
    margin: 28px 0 0;
    color: #c7c9ce;
    font-size: clamp(17px, 1.7vw, 21px);
    line-height: 1.6;
}

.portalPie {
    margin: 0;
    color: #80838a;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.portalPanel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(28px, 6vw, 80px);
    background: rgba(20, 22, 27, .9);
    backdrop-filter: blur(18px);
}

.portalPanelContenido {
    width: min(100%, 430px);
    transition: width .2s ease;
}

.portalPanelContenido--solicitud {
    width: min(100%, 620px);
}

.portalPanel h2 {
    margin: 0;
    font-size: clamp(32px, 4vw, 44px);
    letter-spacing: -.025em;
}

.portalAyuda {
    margin: 14px 0 38px;
    color: var(--portal-secundario);
    line-height: 1.55;
}

.portalCampo {
    margin-bottom: 20px;
}

.portalCampo label {
    display: block;
    margin-bottom: 9px;
    color: #d9dbe0;
    font-size: 13px;
    font-weight: 700;
}

.portalCampo input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--portal-borde);
    border-radius: 10px;
    outline: none;
    background: var(--portal-panel-suave);
    color: var(--portal-texto);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.portalCampo input::placeholder {
    color: #747780;
}

.portalCampo input:focus {
    border-color: var(--portal-acento);
    box-shadow: 0 0 0 3px rgba(166, 183, 91, .12);
}

.portalCampo input[aria-invalid="true"] {
    border-color: #d36969;
    box-shadow: 0 0 0 3px rgba(211, 105, 105, .1);
}

.portalCampoAyuda {
    display: block;
    margin-top: 7px;
    color: #777a82;
    font-size: 11px;
    line-height: 1.4;
}

.portalCampoError {
    margin: 7px 0 0;
    color: #e3a0a0;
    font-size: 11px;
    line-height: 1.4;
}

.portalBoton {
    width: 100%;
    height: 52px;
    margin-top: 8px;
    border: 1px solid var(--portal-acento);
    border-radius: 10px;
    background: var(--portal-acento);
    color: #171914;
    cursor: default;
    font-weight: 800;
}

.portalBotonSecundario {
    width: 100%;
    height: 52px;
    margin-top: 18px;
    border: 1px solid var(--portal-acento);
    border-radius: 10px;
    background: transparent;
    color: var(--portal-acento-claro);
    cursor: default;
    font-weight: 800;
}

#portalMostrarSolicitud,
#portalEnviarSolicitud,
#portalVolverAcceso,
#portalAbrirPrivacidad {
    cursor: pointer;
}

#portalEnviarSolicitud:disabled {
    cursor: wait;
    opacity: .65;
}

.portalPrimeraVez {
    margin-top: 38px;
}

.portalDivisor {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--portal-secundario);
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}

.portalDivisor::before,
.portalDivisor::after {
    width: 100%;
    height: 1px;
    background: var(--portal-borde);
    content: "";
}

.portalEnlace,
.portalSoporte button {
    display: block;
    border: 0;
    background: transparent;
    color: var(--portal-acento-claro);
    cursor: default;
}

.portalEnlace {
    margin: 8px auto 0;
    padding: 4px;
    font-size: 14px;
    font-weight: 700;
}

.portalValidacion {
    max-width: 360px;
    margin: 13px auto 0;
    color: #777a82;
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

.portalRecuperacion {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--portal-borde);
    color: var(--portal-secundario);
    font-size: 13px;
    text-align: center;
}

.portalRecuperacion p {
    margin: 0;
}

.portalSoporte {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--portal-borde);
    color: var(--portal-secundario);
    font-size: 13px;
    text-align: center;
}

.portalSoporte button {
    margin: 8px auto 0;
    padding: 0;
}

.portalFormularioRejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.portalCampo--completo {
    grid-column: 1 / -1;
}

.portalPrivacidad {
    margin: 8px 0 22px;
    padding: 18px;
    border: 1px solid var(--portal-borde);
    border-radius: 10px;
    background: rgba(34, 37, 45, .7);
}

.portalPrivacidad h3 {
    margin: 0 0 8px;
    font-size: 14px;
}

.portalPrivacidad > p,
.portalContenidoPrivacidad p {
    margin: 0;
    color: var(--portal-secundario);
    font-size: 12px;
    line-height: 1.55;
}

.portalEnlacePrivacidad {
    margin: 12px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--portal-acento-claro);
    font-size: 12px;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.portalContenidoPrivacidad {
    margin-top: 14px;
    padding: 14px;
    border-left: 2px solid var(--portal-acento);
    background: rgba(17, 19, 23, .45);
}

.portalContenidoPrivacidad p + p {
    margin-top: 8px;
}

.portalConfirmacion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    color: #c7c9ce;
    font-size: 12px;
    line-height: 1.45;
}

.portalRecordarme {
    margin: -0.15rem 0 1rem;
}

.portalConfirmacion input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--portal-acento);
}

.portalConfirmacion input:disabled + span {
    color: #6f727a;
}

.portalMensajeError {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(211, 105, 105, .5);
    border-radius: 8px;
    background: rgba(211, 105, 105, .08);
    color: #e3a0a0;
    font-size: 12px;
    line-height: 1.45;
}

.portalVolver {
    margin-top: 14px;
}

.portalConfirmacionFinal {
    text-align: center;
}

.portalConfirmacionFinal h2 {
    margin-top: 8px;
}

.portalConfirmacionFinal > p:last-child {
    margin: 18px 0 0;
    color: var(--portal-secundario);
    line-height: 1.6;
}

.portalConfirmacionIcono {
    display: grid;
    width: 62px;
    height: 62px;
    margin: 0 auto 24px;
    place-items: center;
    border: 1px solid var(--portal-acento);
    border-radius: 50%;
    background: rgba(166, 183, 91, .1);
    color: var(--portal-acento-claro);
    font-size: 30px;
    font-weight: 800;
}

.portalHome {
    text-align: left;
}

.portalHomeCabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.portalHomeCabecera h2 {
    margin: 6px 0 4px;
}

.portalHomeCabecera .portalEnlace {
    width: auto;
    flex: 0 0 auto;
}

.portalCampo select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--portal-borde);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    color: var(--portal-texto);
    font: inherit;
}

.portalComunidadResumen {
    position: relative;
    overflow: hidden;
    margin: 18px 0;
    padding: 24px;
    border: 1px solid var(--portal-borde);
    border-radius: 12px;
    background:
        linear-gradient(125deg, rgba(166, 183, 91, .16), rgba(25, 39, 34, .92)),
        radial-gradient(circle at top right, rgba(255, 255, 255, .12), transparent 45%);
}

.portalComunidadImagen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
}

.portalComunidadContenido {
    position: relative;
    z-index: 1;
}

.portalComunidadResumen h3 {
    margin: 7px 0;
    font-size: 22px;
}

.portalComunidadResumen p {
    margin: 5px 0;
}

.portalEstadoNeutro {
    display: inline-flex;
    margin-top: 15px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    color: var(--portal-secundario);
    font-size: 11px;
}

.portalHomeAccesos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.portalHomeAccesos button {
    min-height: 82px;
    padding: 15px;
    border: 1px solid var(--portal-borde);
    border-radius: 10px;
    background: rgba(255, 255, 255, .035);
    color: var(--portal-texto);
    text-align: left;
}

.portalHomeAccesos button:last-child {
    grid-column: 1 / -1;
}

.portalHomeAccesos strong,
.portalHomeAccesos span {
    display: block;
}

.portalHomeAccesos span {
    margin-top: 7px;
    color: var(--portal-secundario);
    font-size: 11px;
}

.portalHomeAccesos button:disabled {
    opacity: .82;
    cursor: default;
}

@media (max-width: 820px) {
    .portalAcceso {
        grid-template-columns: 1fr;
    }

    .portalPresentacion {
        min-height: auto;
        padding: 30px 28px 44px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .portalPresentacionTexto {
        padding: 70px 0 54px;
    }

    .portalPresentacion h1 {
        font-size: clamp(38px, 12vw, 58px);
    }

    .portalPanel {
        min-height: 650px;
        padding: 54px 28px 70px;
    }
}

@media (max-width: 460px) {
    .portalPresentacionTexto {
        padding: 54px 0 42px;
    }

    .portalPie {
        line-height: 1.5;
    }

    .portalPanel {
        min-height: 600px;
    }

    .portalFormularioRejilla {
        grid-template-columns: 1fr;
    }

    .portalCampo--completo {
        grid-column: auto;
    }

    .portalHomeCabecera {
        display: block;
    }

    .portalHomeCabecera .portalEnlace {
        margin-top: 12px;
    }

    .portalHomeAccesos {
        grid-template-columns: 1fr;
    }

    .portalHomeAccesos button:last-child {
        grid-column: auto;
    }
}

.portalBotonEnlace {
    display: grid;
    place-items: center;
    text-decoration: none;
}

.portalAcceso--home {
    display: block;
    background: #101411;
}

.portalAcceso--home > .portalPresentacion {
    display: none;
}

.portalAcceso--home > .portalPanel {
    display: block;
    min-height: 100vh;
    padding: 0;
    background: #101411;
}

.portalAcceso--home .portalPanelContenido {
    width: 100%;
    max-width: none;
}

.portalHome {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr);
    min-height: 100vh;
}

.portalHomeSidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 34px 26px 28px;
    border-right: 1px solid rgba(255, 255, 255, .08);
    background: #0b0e0c;
}

.portalHomeLogo img {
    width: 154px;
}

.portalHomeSidebar nav {
    display: grid;
    gap: 5px;
    margin-top: 56px;
}

.portalHomeSidebar nav a,
.portalHomeSidebar nav span {
    display: flex;
    min-height: 42px;
    padding: 11px 12px;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    border: 1px solid transparent;
    color: #c2c8c3;
    font-size: 15px;
    text-decoration: none;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.portalHomeSidebar nav a:hover {
    transform: translateX(2px);
    border-color: rgba(166, 183, 91, .18);
    background: rgba(255, 255, 255, .035);
    color: var(--portal-acento-claro);
}

.portalHomeSidebar nav a.activo {
    background: rgba(166, 183, 91, .12);
    border-color: rgba(166, 183, 91, .28);
    color: var(--portal-acento-claro);
}

.portalHomeSidebar nav small {
    color: #6f7771;
    font-size: 8px;
}

.portalHomeContacto {
    display: grid;
    gap: 8px;
    margin-top: auto;
}

.portalHomeContacto a {
    color: #7f8881;
    font-size: 10px;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.portalHomePrincipal {
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 28px clamp(24px, 4vw, 64px) 70px;
}

.portalHomeTopbar {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
}

.portalHomeMarca {
    color: var(--portal-acento-claro);
    font-family: Georgia, serif;
    font-size: 21px;
    font-style: italic;
}

.portalCuentaMenu {
    position: relative;
}

.portalCuentaMenu summary {
    display: grid;
    min-width: 180px;
    padding: 8px 34px 8px 14px;
    border: 1px solid var(--portal-borde);
    border-radius: 10px;
    cursor: pointer;
    list-style: none;
}

.portalCuentaMenu summary::after {
    position: absolute;
    right: 14px;
    top: 19px;
    content: "⌄";
}

.portalCuentaMenu summary strong { font-size: 12px; }
.portalCuentaMenu summary span { color: var(--portal-secundario); font-size: 10px; }

.portalCuentaMenu > div {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    width: min(310px, 82vw);
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--portal-borde);
    border-radius: 12px;
    background: #202521;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
}

.portalCuentaMenu > div span { color: var(--portal-secundario); font-size: 12px; }
.portalCuentaMenu button { padding: 10px; border: 1px solid var(--portal-borde); border-radius: 7px; background: transparent; color: var(--portal-texto); }
.portalCuentaMenu button:disabled { color: #7c837e; }

.portalHero {
    position: relative;
    height: clamp(180px, 19vw, 210px);
    margin-top: 22px;
    overflow: hidden;
    border-radius: 22px;
    background: #222824;
}

.portalHero > img,
.portalHeroDegradado {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.portalHero > img { object-fit: cover; }
.portalHeroDegradado { background: linear-gradient(90deg, rgba(8, 12, 10, .88) 0%, rgba(8, 12, 10, .58) 35%, rgba(8, 12, 10, .08) 76%, transparent 100%); }

.portalHeroContenido {
    position: absolute;
    z-index: 1;
    left: clamp(28px, 6vw, 82px);
    bottom: clamp(20px, 2.4vw, 28px);
}

.portalHeroContenido p { margin: 0 0 10px; color: var(--portal-acento-claro); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.portalHeroContenido h1 { max-width: 750px; margin: 0; font-size: clamp(34px, 3.4vw, 40px); font-weight: 520; letter-spacing: -.035em; }
.portalHeroContenido span { display: block; margin-top: 7px; color: #d6dad6; font-size: clamp(13px, 1.4vw, 17px); }
.portalHeroMarcaSecundaria { position: absolute; z-index: 1; right: clamp(24px, 4vw, 58px); bottom: 24px; margin: 0; text-align: right; }
.portalHeroMarcaSecundaria strong,.portalHeroMarcaSecundaria span { display: block; }
.portalHeroMarcaSecundaria strong { color: rgba(234,239,232,.88); font-family: Georgia, serif; font-size: 17px; font-style: italic; font-weight: 400; }
.portalHeroMarcaSecundaria span { margin-top: 4px; color: rgba(221,228,221,.65); font-size: 10px; letter-spacing: .08em; }

.portalHomeRejillaSuperior {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
    gap: 16px;
    margin-top: 15px;
}

.portalTarjetaComunidad,
.portalTarjetaGestor,
.portalNotificaciones,
.portalAccesosV4 button,
.portalGemeloDigital {
    border: 1px solid rgba(220, 235, 224, .11);
    border-radius: 16px;
    background: #1b221e;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .2);
}

.portalTarjetaComunidad { display: grid; grid-template-columns: minmax(175px, 205px) 1fr; min-height: 164px; overflow: hidden; background: linear-gradient(110deg, #202923, #1b211e); }
.portalTarjetaComunidad > img { width: 100%; height: 100%; object-fit: cover; }
.portalTarjetaComunidad > div { padding: 18px 22px; }
.portalTarjetaComunidad h2 { margin: 2px 0 6px; font-size: 22px; }
.portalTarjetaComunidad p { margin: 4px 0; color: var(--portal-secundario); line-height: 1.4; }
.portalTarjetaComunidad .portalCampo { margin: 10px 0 0; }

.portalTarjetaGestor { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 21px; transform: translateY(-24px); background: linear-gradient(145deg, #263028, #19201c); box-shadow: 0 20px 42px rgba(0,0,0,.3); }
.portalTarjetaGestor::before { position: absolute; top: 18px; right: -1px; width: 3px; height: 52px; border-radius: 4px 0 0 4px; background: var(--portal-acento); content: ""; opacity: .7; }
.portalGestorAvatar { display: grid; width: 82px; height: 82px; place-items: center; overflow: hidden; border: 2px solid rgba(190,207,111,.6); border-radius: 50%; background: var(--portal-acento); color: #171914; font-size: 28px; font-weight: 800; box-shadow: 0 8px 22px rgba(0,0,0,.28); }
.portalGestorAvatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.portalTarjetaGestor h2 { margin: 3px 0 8px; font-size: 22px; }
.portalTarjetaGestor p { margin: 0; color: var(--portal-secundario); font-size: 12px; line-height: 1.5; }
.portalTarjetaGestor .portalGestorLema { margin-top: 5px; color: #dce2dc; font-family: Georgia, serif; font-size: 14px; font-style: italic; }
.portalGestorAcciones { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 3px; }
.portalGestorAcciones button,.portalGestorAcciones summary,.portalGestorMensaje { box-sizing: border-box; min-height: 40px; padding: 10px 12px; border: 1px solid var(--portal-borde); border-radius: 8px; background: transparent; color: #d2d8d3; font: inherit; font-size: 12px; text-align: left; text-decoration: none; cursor: pointer; }
.portalGestorMensaje strong,.portalGestorMensaje small { display: block; }
.portalGestorMensaje small { margin-top: 3px; color: #8f9991; font-size: 9px; }
.portalGestorAcciones button.principal { grid-column: 1 / -1; display: flex; min-height: 48px; align-items: center; gap: 10px; border-color: rgba(195, 214, 104, .62); background: linear-gradient(110deg, rgba(166,183,91,.25), rgba(166,183,91,.11)); color: #e4ecc4; cursor: default; box-shadow: inset 0 0 20px rgba(166,183,91,.05); }
.portalGestorAcciones button.principal i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: var(--portal-acento); color: #141713; font-style: normal; font-weight: 900; }
.portalGestorAcciones button.principal strong,.portalGestorAcciones button.principal small,.portalGestorAcciones button.principal em,.portalGestorAcciones button.principal b { display: block; }
.portalGestorAcciones button.principal small { margin-bottom: 2px; color: #dbe5bd; font-size: 9px; }
.portalGestorAcciones button.principal em { margin-top: 2px; color: #bdc7aa; font-size: 10px; font-style: normal; font-weight: 400; }
.portalGestorAcciones button.principal b { margin-top: 4px; color: #dce8ae; font-size: 8px; letter-spacing: .11em; text-transform: uppercase; }
.portalGestorTelefonos { position: relative; }
.portalGestorTelefonos summary { list-style: none; }
.portalGestorTelefonos summary::-webkit-details-marker { display: none; }
.portalGestorTelefonos > div { position: absolute; z-index: 4; top: calc(100% + 5px); left: 0; display: grid; min-width: 150px; padding: 7px; border: 1px solid var(--portal-borde); border-radius: 9px; background: #252c27; box-shadow: 0 12px 28px rgba(0,0,0,.3); }
.portalGestorTelefonos a { padding: 8px; color: var(--portal-texto); text-decoration: none; }
.portalGestorTelefonos a:hover,.portalGestorMensaje:hover { color: var(--portal-acento-claro); }

.portalNotificaciones { display: flex; margin-top: 10px; padding: 14px 22px; align-items: center; justify-content: space-between; background: #171d1a; }
.portalNotificacionesContenido { display: flex; align-items: center; gap: 13px; }
.portalNotificacionesIcono { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: rgba(166,183,91,.12); color: var(--portal-acento); font-size: 16px; filter: drop-shadow(0 0 8px rgba(166,183,91,.2)); }
.portalNotificaciones h2 { margin: 0; font-size: 18px; }
.portalNotificaciones > span { padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--portal-secundario); font-size: 10px; }

.portalAccesosV4 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.portalAccesosV4 button { position: relative; min-height: 140px; padding: 22px; overflow: hidden; color: var(--portal-texto); text-align: left; transition: transform 190ms ease, border-color 190ms ease, box-shadow 190ms ease, background 190ms ease; }
.portalAccesosV4 button:hover { transform: translateY(-2px); border-color: rgba(166,183,91,.48); box-shadow: 0 14px 30px rgba(0,0,0,.22); }
.portalAccesosV4 button:nth-child(2) { background: #1e2520; }
.portalAccesosV4 button:nth-child(3) { background: linear-gradient(145deg, #19201d, #1c231f); }
.portalAccesosV4 button > strong,.portalAccesosV4 button > span:not(.portalServicioVisual),.portalAccesosV4 button > small { position: relative; z-index: 2; display: block; max-width: 61%; }
.portalAccesosV4 button > strong { font-size: 19px; }
.portalAccesosV4 button > span:not(.portalServicioVisual) { margin-top: 11px; color: var(--portal-secundario); line-height: 1.45; }
.portalAccesosV4 button > small { margin-top: 14px; color: var(--portal-acento); font-weight: 800; text-transform: uppercase; }
.portalServicioVisual { position: absolute; z-index: 1; top: 0; right: 0; width: 43%; height: 100%; transition: transform 210ms ease, filter 210ms ease; }
.portalServicioVisual::before { position: absolute; inset: 0; background: linear-gradient(90deg, #1b221e 0%, rgba(27,34,30,.14) 55%, transparent); content: ""; }
.portalAccesosV4 button:nth-child(2) .portalServicioVisual::before { background: linear-gradient(90deg, #1e2520 0%, rgba(30,37,32,.12) 55%, transparent); }
.portalAccesosV4 button:hover .portalServicioVisual { transform: translateX(3px) scale(1.025); filter: brightness(1.12); }
.portalServicioVisual i { position: absolute; display: block; box-sizing: border-box; font-style: normal; }
.portalServicioDocumentos i { right: 16px; width: 58px; height: 78px; border: 1px solid rgba(194,211,111,.42); border-radius: 5px; background: linear-gradient(145deg, rgba(166,183,91,.2), rgba(255,255,255,.025)); box-shadow: -10px 12px 24px rgba(0,0,0,.22); }
.portalServicioDocumentos i::after { position: absolute; top: 15px; left: 12px; width: 30px; height: 25px; border-top: 2px solid rgba(221,231,171,.45); border-bottom: 2px solid rgba(221,231,171,.3); content: ""; }
.portalServicioDocumentos i:nth-child(1) { top: 30px; transform: rotate(9deg); opacity: .45; }
.portalServicioDocumentos i:nth-child(2) { top: 23px; right: 27px; transform: rotate(2deg); opacity: .7; }
.portalServicioDocumentos i:nth-child(3) { top: 16px; right: 39px; transform: rotate(-6deg); }
.portalServicioPagos { background: radial-gradient(circle at 75% 40%, rgba(166,183,91,.22), transparent 45%); }
.portalServicioPagos i:first-child { top: 24px; right: 22px; display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid rgba(205,220,126,.5); border-radius: 50%; background: rgba(37,51,41,.82); color: #cedb8d; font-size: 30px; }
.portalServicioPagos i:nth-child(2) { right: 60px; bottom: 17px; width: 52px; height: 37px; border: 1px solid rgba(166,183,91,.35); border-radius: 5px; transform: rotate(-7deg); }
.portalServicioPagos i:nth-child(3) { right: 12px; bottom: 16px; width: 66px; height: 31px; border-bottom: 2px solid rgba(166,183,91,.4); background: repeating-linear-gradient(90deg, rgba(166,183,91,.25) 0 6px, transparent 6px 11px); opacity: .65; }
.portalServicioReservas { background: radial-gradient(circle at 70% 45%, rgba(76,132,113,.24), transparent 52%); }
.portalServicioReservas i:first-child { top: 22px; right: 18px; width: 76px; height: 72px; border: 1px solid rgba(177,202,120,.5); border-radius: 8px; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(177,202,120,.18) 18px 19px), repeating-linear-gradient(0deg, transparent 0 17px, rgba(177,202,120,.18) 17px 18px); }
.portalServicioReservas i:first-child::before { position: absolute; top: -7px; left: 12px; width: 4px; height: 13px; border-radius: 3px; background: #a6b75b; content: ""; box-shadow: 44px 0 #a6b75b; }
.portalServicioReservas i:nth-child(2) { right: 54px; bottom: 19px; width: 55px; height: 16px; border: 1px solid rgba(102,177,166,.5); border-radius: 50%; transform: rotate(-8deg); }
.portalServicioReservas i:nth-child(3) { right: 15px; bottom: 14px; width: 56px; height: 26px; border-top: 2px solid rgba(102,177,166,.42); border-radius: 50%; }

.portalGemeloDigital { position: relative; min-height: 205px; margin-top: 16px; padding: clamp(25px, 3vw, 36px); overflow: hidden; background: radial-gradient(circle at 78% 40%, rgba(110, 151, 133, .34), transparent 32%), linear-gradient(130deg, #101a17, #141a17); }
.portalGemeloDigital h2 { margin: 0; font-size: clamp(34px, 4vw, 52px); letter-spacing: -.04em; }
.portalGemeloDigital p:not(.portalEtiqueta) { color: #bdc7c0; font-size: 18px; }
.portalGemeloDigital button { margin-top: 24px; padding: 12px 22px; border: 1px solid var(--portal-acento); border-radius: 9px; background: transparent; color: var(--portal-acento-claro); }
.portalGemeloVisual { position: absolute; right: 7%; top: 5%; width: 270px; height: 195px; perspective: 700px; filter: drop-shadow(0 10px 22px rgba(0,0,0,.35)); animation: portalGemeloFlotar 10s ease-in-out infinite; }
.portalEdificio { position: absolute; top: 24px; left: 62px; width: 132px; height: 128px; transform: rotateX(4deg) rotateY(-8deg); transform-style: preserve-3d; animation: portalEdificioProfundidad 12s ease-in-out infinite; }
.portalEdificioFrente { position: absolute; inset: 20px 0 0; border: 1px solid rgba(202,220,126,.62); background: linear-gradient(150deg, rgba(112,151,130,.22), rgba(20,31,26,.2)); clip-path: polygon(0 8%, 72% 0, 72% 100%, 0 89%); }
.portalEdificioLateral { position: absolute; top: 20px; right: -35px; width: 58px; height: 108px; border: 1px solid rgba(160,198,156,.42); background: rgba(42,70,59,.22); transform: skewY(-16deg); }
.portalEdificioTecho { position: absolute; top: 4px; left: 1px; width: 129px; height: 35px; border: 1px solid rgba(211,226,142,.7); background: rgba(166,183,91,.1); transform: skewX(-44deg) rotate(-7deg); transform-origin: left bottom; }
.portalEdificioVentanas { position: absolute; top: 44px; left: 16px; width: 66px; height: 68px; background: repeating-linear-gradient(90deg, rgba(184,213,177,.55) 0 8px, transparent 8px 22px), repeating-linear-gradient(0deg, transparent 0 14px, rgba(184,213,177,.44) 14px 16px); clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 90%); opacity: .7; animation: portalVentanasPulso 8s ease-in-out infinite alternate; }
.portalEdificioPlano { position: absolute; border: 1px solid rgba(166,183,91,.23); transform: skewX(-42deg) rotate(-5deg); }
.portalEdificioPlano--fondo { top: 8px; right: 6px; width: 180px; height: 145px; opacity: .55; }
.portalEdificioPlano--base { right: 20px; bottom: 16px; width: 205px; height: 58px; border-color: rgba(117,179,158,.3); }
.portalEdificioPulso { position: absolute; right: 38px; bottom: 29px; width: 180px; height: 34px; border: 1px solid rgba(166,183,91,.35); border-radius: 50%; animation: portalEdificioPulso 7s ease-out infinite; }

@keyframes portalGemeloFlotar { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes portalEdificioProfundidad { 0%,100% { transform: rotateX(4deg) rotateY(-8deg) translateX(0); } 50% { transform: rotateX(2deg) rotateY(-3deg) translateX(5px); } }
@keyframes portalVentanasPulso { from { opacity: .42; filter: drop-shadow(0 0 0 rgba(199,219,125,0)); } to { opacity: .82; filter: drop-shadow(0 0 7px rgba(199,219,125,.25)); } }
@keyframes portalEdificioPulso { 0% { scale: .7; opacity: .45; } 75%,100% { scale: 1.08; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .portalGemeloVisual,.portalEdificio,.portalEdificioVentanas,.portalEdificioPulso { animation: none; }
    .portalHomeSidebar nav a,.portalAccesosV4 button,.portalServicioVisual { transition: none; }
}

@media (max-width: 980px) {
    .portalHome { grid-template-columns: 1fr; }
    .portalHomeSidebar { position: static; height: auto; padding: 20px 24px; }
    .portalHomeSidebar nav { display: flex; margin-top: 22px; overflow-x: auto; }
    .portalHomeSidebar nav a,.portalHomeSidebar nav span { flex: 0 0 auto; }
    .portalHomeContacto { display: none; }
    .portalHomeRejillaSuperior { grid-template-columns: 1fr; }
    .portalTarjetaGestor { transform: none; }
}

@media (max-width: 680px) {
    .portalHomePrincipal { padding: 18px 16px 50px; }
    .portalHomeMarca { font-size: 17px; }
    .portalCuentaMenu summary { min-width: 145px; }
    .portalHero { height: 160px; min-height: 0; border-radius: 15px; }
    .portalHeroContenido { left: 22px; bottom: 18px; }
    .portalHeroContenido p { margin-bottom: 6px; }
    .portalHeroContenido h1 { font-size: clamp(28px, 9vw, 34px); }
    .portalHeroContenido span { margin-top: 4px; }
    .portalHeroMarcaSecundaria { display: none; }
    .portalTarjetaComunidad { grid-template-columns: 1fr; }
    .portalTarjetaComunidad > img { height: 130px; }
    .portalAccesosV4 { grid-template-columns: 1fr; }
    .portalGemeloVisual { opacity: .35; right: -70px; }
    .portalGestorAcciones { grid-template-columns: 1fr; }
    .portalGestorAcciones button.principal { grid-column: auto; }
}