/* Portal cinematográfico — Prefeitura de Olinda. Loaded last on the public page. */

.skip-link {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    z-index: var(--z-skip, 50);
    padding: 0.65rem 1rem;
    background: var(--portal-yellow, #ffc400);
    color: var(--portal-text, #123853);
    font-weight: 700;
    text-decoration: none;
    border-radius: 0.35rem;
    transform: translateY(-160%);
}
.skip-link:focus {
    transform: translateY(0);
}

html:has(.portal-page),
body:has(.portal-page),
body:has(.portal-page) .main-auth {
    background: var(--portal-canvas, #eef4f9) !important;
    color: var(--portal-text, #123853) !important;
}

.portal-page,
.portal-page * {
    font-family: var(--font-portal, "Instrument Sans", "Segoe UI", sans-serif);
}

html:has(.portal-page) {
    overflow-x: clip;
}
body:has(.portal-page),
.portal-page,
.portal-page.public-page {
    overflow-x: visible;
}

.portal-page {
    --public-text: var(--portal-text);
    --portal-shell: min(1680px, calc(100vw - 3rem));
    color: var(--portal-text);
}

.portal-page h1,
.portal-page h2,
.portal-page h3,
.portal-page .landing-hero-copy h1,
.portal-page .section-title h2 {
    font-family: var(--font-portal, "Instrument Sans", "Segoe UI", sans-serif) !important;
    color: var(--portal-text) !important;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.portal-page p,
.portal-page .landing-section-copy,
.portal-page .landing-dashboard-copy {
    color: var(--portal-muted) !important;
    text-wrap: pretty;
    max-width: 72ch;
}

/* --- Hero full-bleed --- */
.portal-hero {
    position: relative;
    isolation: isolate;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto;
    align-content: start;
    padding-bottom: 2.1rem;
    color: var(--portal-on-dark);
    background: var(--portal-blue-dark);
    overflow: hidden;
}

.portal-hero-media,
.portal-hero-media .landing-hero-carousel,
.portal-hero-media .landing-hero-slides,
.portal-hero-media .landing-hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.portal-hero-media {
    z-index: 0;
    pointer-events: none;
}

.portal-page .portal-hero-media .landing-hero-carousel,
.portal-page .portal-hero-media .landing-hero-slides,
.portal-page .portal-hero-media .landing-hero-slide {
    overflow: hidden !important;
}

.portal-page .portal-hero-media .landing-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 48% !important;
    transform: none !important;
    filter: saturate(0.98) contrast(1.08) brightness(0.82) !important;
}

.portal-hero-media .landing-hero-slide {
    opacity: 0;
    transition: opacity 900ms var(--ease-portal, cubic-bezier(0.16, 1, 0.3, 1));
}
.portal-hero-media .landing-hero-slide.is-active {
    opacity: 1;
}

.portal-hero-placeholder {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 80% 10%, rgba(255, 196, 0, 0.28), transparent 55%),
        radial-gradient(ellipse 50% 40% at 10% 90%, rgba(229, 0, 126, 0.18), transparent 50%),
        linear-gradient(165deg, #0a4e82 0%, #075b98 48%, #1a7ab8 100%);
}

.portal-hero-light {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.55;
}

.portal-hero-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(5, 28, 48, 0.78) 0%, rgba(7, 41, 72, 0.52) 34%, rgba(7, 41, 72, 0.28) 68%, rgba(5, 28, 48, 0.58) 100%),
        linear-gradient(90deg, rgba(5, 28, 48, 0.82) 0%, rgba(7, 41, 72, 0.58) 26%, rgba(7, 41, 72, 0.22) 48%, transparent 70%);
    pointer-events: none;
}

@supports (animation-timeline: scroll()) {
    .portal-hero-veil {
        animation: portal-hero-veil 1s linear both;
        animation-timeline: scroll();
        animation-range: 0vh 80vh;
    }
}

@keyframes portal-hero-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}
@keyframes portal-hero-veil {
    from { opacity: 1; }
    to { opacity: 0.55; }
}

.portal-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1.15rem;
    width: var(--portal-shell, min(1680px, calc(100vw - 3rem)));
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem 0 0.4rem;
}

.portal-pref-brand {
    display: grid;
    gap: 0.28rem;
    text-decoration: none;
    min-width: 0;
}
.portal-pref-brand img,
.portal-brand img {
    display: block;
    height: clamp(64px, 8vw, 96px);
    width: auto;
    max-width: min(280px, 42vw);
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.35));
}

.portal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--portal-yellow);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.portal-kicker::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--portal-yellow);
    box-shadow: 0 0 0 6px rgba(255, 196, 0, 0.18);
}

.portal-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    padding-left: 0.85rem;
    border-left: 1px solid rgba(255, 255, 255, 0.28);
}

.portal-login {
    margin-left: auto;
    color: var(--portal-on-dark);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 0.1rem;
    background: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.portal-login:hover,
.portal-login:focus-visible {
    color: var(--portal-yellow);
    border-bottom-color: var(--portal-yellow);
}

.portal-hero-copy {
    position: relative;
    z-index: 2;
    align-self: start;
    width: var(--portal-shell, min(1680px, calc(100vw - 3rem)));
    margin: 0 auto;
    padding: clamp(0.9rem, 3vh, 1.8rem) 0 0.15rem;
}
.portal-hero-copy h1,
.portal-hero-copy .hero-subtitle,
.portal-hero-copy .portal-hero-actions {
    max-width: 46rem;
}

.portal-hero-copy h1 {
    margin: 0 0 0.85rem;
    color: #fff !important;
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.035em;
    text-wrap: balance;
    text-shadow:
        0 1px 1px rgba(5, 28, 48, 0.9),
        0 10px 28px rgba(5, 28, 48, 0.55);
}

.portal-hero-copy h1 em {
    display: block;
    margin-top: 0.12em;
    font-family: var(--font-portal-em, Caveat, cursive);
    font-style: normal;
    font-weight: 700;
    font-size: 0.72em;
    letter-spacing: 0;
    color: #ffd84a;
    line-height: 1.12;
    text-shadow:
        0 1px 1px rgba(5, 28, 48, 0.92),
        0 8px 22px rgba(5, 28, 48, 0.6);
}

.portal-hero-copy .hero-subtitle {
    margin: 0 0 1.4rem;
    color: #f4f8fc !important;
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
    font-weight: 500;
    line-height: 1.55;
    max-width: 38rem;
    text-shadow:
        0 1px 1px rgba(5, 28, 48, 0.92),
        0 8px 22px rgba(5, 28, 48, 0.5);
}

.portal-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.portal-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    border-radius: 0.45rem;
    background: var(--portal-yellow) !important;
    color: var(--portal-text) !important;
    border: 0 !important;
    font-weight: 700 !important;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.portal-cta:hover,
.portal-cta:focus-visible {
    filter: brightness(1.05);
}

.portal-cta-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.75rem 1.15rem;
    border-radius: 0.45rem;
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    font-weight: 650 !important;
    text-decoration: none;
}
.portal-cta-ghost:hover,
.portal-cta-ghost:focus-visible {
    border-color: var(--portal-yellow) !important;
    color: var(--portal-yellow) !important;
}

.portal-hero .landing-hero-carousel-dots {
    position: absolute;
    right: 1.4rem;
    bottom: 1.4rem;
    left: auto;
    transform: none;
    z-index: 2;
    background: rgba(7, 41, 72, 0.35);
    border-radius: 999px;
    pointer-events: auto;
}

.portal-hero .landing-admin-link { display: none !important; }

/* --- Sticky rail --- */
.portal-rail {
    position: sticky;
    top: 0;
    z-index: var(--z-rail, 20);
    overflow: visible;
    background: rgba(238, 244, 249, 0.96);
    border-bottom: 1px solid rgba(18, 56, 83, 0.08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
body:has(.header) .portal-rail {
    top: 6rem;
}
.portal-rail .portal-shell {
    display: flex;
    gap: 0.15rem;
    width: var(--portal-shell, min(1680px, calc(100vw - 3rem)));
    margin: 0 auto;
    padding: 0.55rem 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.portal-rail .portal-shell::-webkit-scrollbar { display: none; }

.portal-rail a {
    flex: 0 0 auto;
    padding: 0.55rem 0.7rem;
    color: var(--portal-text);
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.portal-rail a:hover,
.portal-rail a.is-active {
    color: var(--portal-blue-dark);
    border-bottom-color: var(--portal-yellow);
}

/* --- Body sections --- */
.portal-page .container,
.portal-page .public-page-shell,
.portal-page .landing-section,
.portal-page .tab-section,
.portal-page .tab-section[data-tab-panel],
.portal-page .tab-section[data-tab-panel="dashboard"],
.portal-page .portal-footer-grid,
.portal-page .portal-footer-meta {
    width: var(--portal-shell, min(1680px, calc(100vw - 3rem))) !important;
    max-width: var(--portal-shell, 1680px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.portal-page .landing-highlight-grid,
.portal-page .public-kpi-grid,
.portal-page .landing-ods-grid,
.portal-page .landing-dashboard-grid,
.portal-page .chart-grid-public,
.portal-page .public-impact-grid,
.portal-page .landing-stories-grid,
.portal-page .landing-gallery-grid {
    width: 100%;
}

.portal-page .tab-section,
.portal-page.public-page[data-active-tab] .tab-section[data-tab-panel],
.portal-page.public-page[data-active-tab="dashboard"] .tab-section[data-tab-panel]:not([data-tab-panel="dashboard"]),
.portal-page.public-page[data-active-tab="educacao"] .tab-section[data-tab-panel]:not([data-tab-panel="educacao"]),
.portal-page.public-page[data-active-tab="historias"] .tab-section[data-tab-panel]:not([data-tab-panel="historias"]),
.portal-page.public-page[data-active-tab="participacao"] .tab-section[data-tab-panel]:not([data-tab-panel="participacao"]) {
    display: block !important;
    animation: none !important;
}

.portal-page .landing-section,
.portal-page .tab-section {
    scroll-margin-top: 4.75rem;
    margin-top: 2.4rem;
}

.portal-page .landing-section,
.portal-page .landing-realtime-intro {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.portal-page .landing-ods-section {
    padding: clamp(1.4rem, 3.2vw, 2.1rem) clamp(1.25rem, 3.2vw, 2.1rem) !important;
}

.portal-page .landing-ods-section .section-title {
    margin-bottom: 1.15rem !important;
}

.portal-page .landing-realtime-intro {
    gap: 1.5rem;
}

.portal-page .landing-dashboard-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin: 0.35rem 0 1.75rem;
    padding: 0.35rem 0 0.5rem;
}

.portal-page .badge-tempo-real {
    padding: 0.72rem 1.2rem !important;
    white-space: normal;
    line-height: 1.35;
    animation: none !important;
}

.portal-page .btn-public-refresh {
    padding: 0.75rem 1.3rem !important;
}

.portal-page .landing-story-card,
.portal-page .landing-points-card,
.portal-page .landing-participation-card,
.portal-page .landing-ods-section {
    border-radius: 1.1rem !important;
    background: var(--portal-surface) !important;
    border: 1px solid rgba(18, 56, 83, 0.08) !important;
    box-shadow: 0 18px 40px rgba(7, 91, 152, 0.08) !important;
}

.portal-page .section-title-dots { display: none !important; }

.portal-page .section-title h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
}

.portal-page .section-title .second {
    font-family: var(--font-portal-em, Caveat, cursive) !important;
    font-weight: 700 !important;
    color: var(--portal-blue-dark) !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 1.15em;
}

.portal-page .landing-mini-title {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: var(--portal-blue-dark) !important;
}

/* Stat band */
.portal-page .landing-highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border-radius: 1.1rem;
    background: var(--portal-blue-dark);
    box-shadow: 0 22px 48px rgba(7, 91, 152, 0.22);
}

.portal-page .landing-highlight-card {
    padding: 1.4rem 1.2rem 1.5rem;
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}
.portal-page .landing-highlight-card:last-child { border-right: 0 !important; }

.portal-page .landing-highlight-icon { display: none !important; }

.portal-page .landing-highlight-label {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 650 !important;
    font-size: 0.86rem !important;
    color: rgba(244, 248, 252, 0.78) !important;
}

.portal-page .landing-highlight-card strong {
    font-family: var(--font-portal) !important;
    font-size: clamp(1.55rem, 2.4vw, 2.15rem) !important;
    letter-spacing: -0.03em !important;
    color: #fff !important;
}

.portal-page .landing-highlight-card p {
    color: rgba(244, 248, 252, 0.7) !important;
    font-size: 0.86rem;
}

/* ODS mosaic — official colors as surface */
.portal-page .landing-ods-card {
    background: var(--ods-accent, var(--portal-blue)) !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 16px 32px color-mix(in srgb, var(--ods-accent) 28%, transparent) !important;
    transform: none;
    transition: transform 280ms var(--ease-portal), filter 280ms var(--ease-portal);
}
.portal-page .landing-ods-card::before,
.portal-page .landing-ods-card::after { display: none !important; }
.portal-page .landing-ods-card strong,
.portal-page .landing-ods-card p {
    color: #fff !important;
}

.portal-page .landing-ods-open-hint,
.portal-page .landing-ods-card .landing-ods-open-hint,
.portal-page .landing-ods-card.ods-7 .landing-ods-open-hint {
    background: #ffffff !important;
    color: #0a1828 !important;
    border: 2px solid #0a1828 !important;
    box-shadow: none !important;
    font-weight: 800 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0 !important;
    padding: 0.4rem 0.85rem !important;
    min-height: 36px;
    align-items: center;
    border-radius: 999px !important;
}
.portal-page .landing-ods-number {
    background: rgba(0, 0, 0, 0.22) !important;
    box-shadow: none !important;
}
.portal-page .landing-ods-card:hover,
.portal-page .landing-ods-card:focus-visible {
    transform: translateY(-4px) scale(1.015);
    filter: saturate(1.08);
}

.portal-page .landing-ods-mosaic-tile {
    border-radius: 0.55rem;
}

/* Dashboard + buttons */
.portal-page .btn-public-refresh,
.portal-page .btn-public-calc,
.portal-page .landing-dashboard-button.is-active,
.portal-page .landing-tab-button.is-active {
    background: var(--portal-blue-dark) !important;
    border-color: var(--portal-blue-dark) !important;
    color: #fff !important;
}

.portal-page .landing-dashboard-button,
.portal-page .landing-tab-button {
    background: #fff !important;
    color: var(--portal-text) !important;
    border: 1px solid rgba(18, 56, 83, 0.14) !important;
}
.portal-page .landing-tab-button::after,
.portal-page .landing-dashboard-button::after {
    background: var(--portal-yellow) !important;
}

.portal-page .landing-tabs-shell { display: none !important; }

.portal-page .impacto-card {
    background: var(--portal-blue-dark) !important;
    border-color: transparent !important;
}

.portal-page .fx-pointer-card,
.portal-page .fx-tilt {
    transform: none !important;
}
.portal-page .fx-pointer-card::after { display: none !important; }

.portal-page .public-scroll-progress {
    background: linear-gradient(90deg, var(--portal-blue-dark), var(--portal-yellow)) !important;
    box-shadow: none !important;
}

/* Footer */
.portal-footer {
    margin-top: 3.5rem;
    padding: 2.4rem 1.2rem 1.6rem;
    background: var(--portal-blue-dark);
    color: var(--portal-on-dark);
}
.portal-footer-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.portal-footer-logo img,
.portal-footer-carnaval {
    display: block;
    height: 72px;
    width: auto;
    max-width: min(220px, 46vw);
    object-fit: contain;
    object-position: left center;
    filter: none;
}
.portal-footer-carnaval {
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.portal-footer-grid {
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 0.9fr));
    gap: 1.6rem;
    align-items: start;
}
.portal-footer a { color: var(--portal-yellow); text-decoration: none; }
.portal-footer a:hover { text-decoration: underline; }
.portal-footer h2 {
    margin: 0 0 0.6rem;
    color: #fff !important;
    font-size: 1.05rem;
}
.portal-footer p,
.portal-footer li { color: var(--portal-on-dark-soft); }
.portal-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.portal-footer-meta {
    margin: 1.6rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--portal-on-dark-soft);
    font-size: 0.86rem;
}

@media (max-width: 900px) {
    .portal-page .landing-highlight-grid {
        grid-template-columns: 1fr 1fr;
    }
    .portal-page .landing-highlight-card:nth-child(2) { border-right: 0 !important; }
    .portal-footer-grid { grid-template-columns: 1fr; }
    .portal-hero { padding-bottom: 1.6rem; }
}

@media (max-width: 640px) {
    .portal-page .landing-highlight-grid { grid-template-columns: 1fr; }
    .portal-page .landing-highlight-card { border-right: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; }
    .portal-hero-copy h1 { font-size: clamp(2.1rem, 11vw, 3.1rem); }
    .portal-pref-brand img,
    .portal-brand img {
        height: 56px;
        max-width: 44vw;
    }
    .portal-brand {
        padding-left: 0.55rem;
    }
    body:has(.header) .portal-rail {
        top: 4rem;
    }
    .portal-page .landing-dashboard-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
    }
    .portal-page .btn-public-refresh {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-hero-media .landing-hero-image,
    .portal-hero-veil {
        animation: none !important;
    }
    .portal-page .portal-hero-media .landing-hero-image {
        transform: none !important;
    }
    .portal-hero-light { display: none !important; }
    .portal-page .landing-ods-card:hover { transform: none; }
}

/* --- Palette lock: kill mint/Claude green on the public portal --- */
html:has(.portal-page),
body:has(.portal-page),
body:has(.portal-page) .main-auth,
.portal-page.public-page,
.portal-page {
    --public-bg: var(--portal-canvas);
    --public-surface: #ffffff;
    --public-panel: var(--portal-blue-dark);
    --public-text: var(--portal-text);
    --public-muted: var(--portal-muted);
    --public-blue: var(--portal-blue);
    --public-teal: var(--portal-blue);
    --public-orange: var(--portal-yellow);
    --public-yellow: var(--portal-yellow);
    --public-pink: var(--portal-pink);
    --public-purple: var(--portal-blue-dark);
    --mat-papelao: #075b98;
    --mat-plastico: #2f6faf;
    --mat-latinha: #ffc400;
    --mat-pet: #5aa0d4;
    --mat-oleo: #e5007e;
    --mat-vidro: #123853;
    --claude-primary: var(--portal-blue-dark);
    --claude-primary-aa: var(--portal-blue-dark);
    --claude-canvas: var(--portal-canvas);
    --fx-accent: var(--portal-yellow);
    background: var(--portal-canvas) !important;
    color: var(--portal-text) !important;
}

.portal-page.public-page .section-title h2,
.portal-page.public-page .section-title .first,
.portal-page .section-title h2,
.portal-page .section-title .first {
    text-transform: none !important;
    color: var(--portal-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
}

.portal-page.public-page .section-title .second,
.portal-page .section-title .second {
    background: none !important;
    color: var(--portal-blue-dark) !important;
    text-transform: none !important;
    padding: 0 !important;
}

.portal-page .landing-ods-section {
    background: #fff !important;
    border-color: rgba(18, 56, 83, 0.08) !important;
    box-shadow: 0 18px 40px rgba(7, 91, 152, 0.08) !important;
    padding: clamp(1.4rem, 3.2vw, 2.1rem) clamp(1.25rem, 3.2vw, 2.1rem) !important;
}

.portal-page .badge-tempo-real {
    background: var(--portal-blue-dark) !important;
    color: #fff !important;
    padding: 0.72rem 1.2rem !important;
    animation: none !important;
}

.portal-page .edu-simulator {
    background: var(--portal-blue-dark) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 18px 40px rgba(7, 91, 152, 0.22) !important;
}

.portal-page .btn-public-calc {
    background: var(--portal-yellow) !important;
    color: var(--portal-text) !important;
    border-color: var(--portal-yellow) !important;
    box-shadow: 0 10px 22px rgba(7, 91, 152, 0.16) !important;
}

.portal-page .impacto-card,
.portal-page .impacto-card.blue,
.portal-page .impacto-card.green,
.portal-page .impacto-card.orange,
.portal-page .impacto-card.cyan,
.portal-page .impacto-card.purple,
.portal-page #card-pet-oceano,
.portal-page #public-impacto-cards > .impacto-card-link > .impacto-card {
    background: linear-gradient(180deg, #2f6faf, #075b98) !important;
    border-color: transparent !important;
    color: #fff !important;
    --card-glow: rgba(255, 196, 0, 0.22);
    box-shadow: 0 16px 34px rgba(7, 91, 152, 0.18) !important;
}

.portal-page .impacto-card::before {
    background:
        radial-gradient(circle at top right, rgba(255, 196, 0, 0.22), transparent 42%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.08), transparent 58%) !important;
}

.portal-page .edu-simulator,
.portal-page .landing-dashboard-block .edu-simulator {
    background:
        radial-gradient(circle at top right, rgba(255, 196, 0, 0.18), transparent 30%),
        linear-gradient(145deg, #0a3a66 0%, #075b98 48%, #2f6faf 100%) !important;
    box-shadow: 0 24px 48px rgba(7, 91, 152, 0.2) !important;
}

.portal-page .edu-simulator::after {
    background: rgba(255, 196, 0, 0.12) !important;
}

.portal-page .public-kpi-grid .stats-card,
.portal-page .stats-card,
.portal-page .chart-card-public,
.portal-page .landing-dashboard-block,
.portal-page .landing-dashboard-nav-shell,
.portal-page .landing-faq-item,
.portal-page .landing-explainer-card,
.portal-page .landing-club-card,
.portal-page .event-card {
    background: #fff !important;
    border: 1px solid rgba(18, 56, 83, 0.1) !important;
    box-shadow: 0 10px 24px rgba(7, 91, 152, 0.06) !important;
    color: var(--portal-text) !important;
}

.portal-page .stats-value,
.portal-page .chart-card-value,
.portal-page .chart-card-label {
    color: var(--portal-blue-dark) !important;
}

.portal-page .card-border-orange,
.portal-page .card-border-green,
.portal-page .card-border-blue,
.portal-page .card-border-yellow,
.portal-page .public-kpi-grid .card-border-orange,
.portal-page .public-kpi-grid .card-border-green {
    border-left-color: var(--portal-yellow) !important;
    border-left-width: 1px !important;
}

.portal-rail {
    background: rgba(238, 244, 249, 0.94) !important;
}

.portal-page .public-scroll-progress {
    background: linear-gradient(90deg, var(--portal-blue-dark), var(--portal-yellow)) !important;
}

/* --- Organize dashboard without dropping data --- */
.portal-page .landing-section,
.portal-page .tab-section {
    scroll-margin-top: 4.75rem;
}

.portal-login {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.portal-page .landing-mini-title,
.portal-page .stats-label,
.portal-page .edu-eyebrow,
.portal-page .landing-story-meta,
.portal-page .impacto-label {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 650 !important;
}

.portal-page .landing-bullet-item,
.portal-page .landing-explainer-card,
.portal-page .landing-participation-cta,
.portal-page .landing-participation-column {
    background: #fff !important;
    border: 1px solid rgba(18, 56, 83, 0.1) !important;
    color: var(--portal-text) !important;
    box-shadow: none !important;
}

.portal-page .landing-participation-cta {
    padding: 1.1rem 1.2rem !important;
    border-radius: 0.75rem !important;
}

.portal-page #public-impacto-cards,
.portal-page .public-impact-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.85rem !important;
}

.portal-page #public-impacto-cards > .impacto-card-link > .impacto-card {
    display: grid !important;
    grid-template-areas:
        "icon label"
        "value value"
        "unit unit"
        "meta meta" !important;
    grid-template-columns: auto 1fr !important;
    gap: 0.28rem 0.55rem !important;
    min-height: 168px !important;
    padding: 1.15rem 1.2rem 1.2rem !important;
    border-radius: 0.75rem !important;
    text-align: left !important;
}

.portal-page .impacto-icon {
    grid-area: icon !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 1rem !important;
    margin: 0 !important;
}

.portal-page .impacto-label {
    grid-area: label !important;
    color: rgba(244, 248, 252, 0.78) !important;
    font-size: 0.88rem !important;
}

.portal-page .impacto-value {
    grid-area: value !important;
    color: #fff !important;
    font-size: clamp(1.45rem, 2vw, 1.9rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
}

.portal-page .impacto-unit {
    grid-area: unit !important;
    color: var(--portal-yellow) !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
}

.portal-page .impacto-secondary {
    grid-area: meta !important;
    color: rgba(244, 248, 252, 0.72) !important;
    font-size: 0.8rem !important;
}

.portal-page .landing-ods-card.ods-3,
.portal-page .landing-ods-card.ods-5,
.portal-page .landing-ods-card.ods-6,
.portal-page .landing-ods-card.ods-7,
.portal-page .landing-ods-card.ods-9,
.portal-page .landing-ods-card.ods-11,
.portal-page .landing-ods-card.ods-12,
.portal-page .landing-ods-card.ods-14,
.portal-page .landing-ods-card.ods-15,
.portal-page .landing-ods-card.ods-3 p,
.portal-page .landing-ods-card.ods-3 strong,
.portal-page .landing-ods-card.ods-5 p,
.portal-page .landing-ods-card.ods-5 strong,
.portal-page .landing-ods-card.ods-6 p,
.portal-page .landing-ods-card.ods-6 strong,
.portal-page .landing-ods-card.ods-7 p,
.portal-page .landing-ods-card.ods-7 strong,
.portal-page .landing-ods-card.ods-9 p,
.portal-page .landing-ods-card.ods-9 strong,
.portal-page .landing-ods-card.ods-11 p,
.portal-page .landing-ods-card.ods-11 strong,
.portal-page .landing-ods-card.ods-12 p,
.portal-page .landing-ods-card.ods-12 strong,
.portal-page .landing-ods-card.ods-14 p,
.portal-page .landing-ods-card.ods-14 strong,
.portal-page .landing-ods-card.ods-15 p,
.portal-page .landing-ods-card.ods-15 strong {
    color: #0a1828 !important;
}

.portal-page .landing-dashboard-nav-shell {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding: 1rem 1.15rem !important;
}

@media (max-width: 960px) {
    .portal-page #public-impacto-cards,
    .portal-page .public-impact-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media (max-width: 640px) {
    .portal-page #public-impacto-cards,
    .portal-page .public-impact-grid {
        grid-template-columns: 1fr !important;
    }
    .portal-page .landing-dashboard-nav-shell {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* Contrast on dark surfaces — beats .portal-page p/h3 { color: muted/text } */
.portal-page .edu-simulator,
.portal-page .landing-dashboard-block .edu-simulator {
    color: #f4f8fc !important;
}
.portal-page .edu-simulator h3,
.portal-page .edu-simulator strong,
.portal-page .edu-result-card strong {
    color: #ffffff !important;
}
.portal-page .edu-simulator p,
.portal-page .edu-simulator span,
.portal-page .edu-simulator small,
.portal-page .edu-simulator label,
.portal-page .edu-description,
.portal-page .edu-field span,
.portal-page .edu-field small,
.portal-page .edu-result-card p,
.portal-page .edu-result-card span,
.portal-page .edu-simulator-note {
    color: #e8f1f8 !important;
}
.portal-page .edu-simulator .edu-eyebrow {
    color: #ffd84a !important;
}
.portal-page .edu-field {
    background: rgba(7, 41, 72, 0.38) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}
.portal-page .edu-field input {
    color: #ffffff !important;
    background: rgba(7, 41, 72, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}
.portal-page .edu-result-card {
    background: rgba(7, 41, 72, 0.32) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
.portal-page .edu-simulator-note {
    background: rgba(7, 41, 72, 0.4) !important;
}

.portal-page .portal-footer p,
.portal-page .portal-footer li,
.portal-page .portal-footer-meta {
    color: #e8f1f8 !important;
}
.portal-page .portal-footer a,
.portal-page .portal-kicker,
.portal-page .impacto-unit {
    color: #ffd84a !important;
}

.portal-page .landing-highlight-label,
.portal-page .impacto-label,
.portal-page .impacto-secondary,
.portal-page .landing-highlight-card p {
    color: #e8f1f8 !important;
}

.portal-page .landing-ods-number {
    background: #ffffff !important;
    color: #0a1828 !important;
    border: 1px solid #0a1828 !important;
}



/* Scroll reveal — sections arrive as the city unrolls */
@keyframes portal-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.portal-page.fx-ready:not(.fx-static) .fx-block:not(.fx-visible) {
    opacity: 0;
}

.portal-page.fx-ready:not(.fx-static) .fx-block.fx-visible {
    opacity: 1;
    transition: opacity 520ms var(--ease-portal, cubic-bezier(0.16, 1, 0.3, 1));
}

.portal-page.fx-ready:not(.fx-static) .fx-stagger {
    animation: portal-rise 680ms var(--ease-portal, cubic-bezier(0.16, 1, 0.3, 1)) both;
    animation-delay: var(--fx-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    .portal-page.fx-ready .fx-block,
    .portal-page.fx-ready .fx-stagger {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
        filter: none !important;
    }
}