:root {
    /* Condos brand — fuente de verdad cromática para Web y futura administración. */
    --condos-green: #2e7d5a;
    --condos-green-dark: #164534;
    --condos-mint: #66d19e;
    --condos-lime: #b8e06f;
    --condos-dark: #0f1714;
    --condos-canvas: #f6faf8;
    --condos-ink: #17201c;
    --condos-muted: #68746e;

    --condos-green-rgb: 46, 125, 90;
    --condos-green-dark-rgb: 22, 69, 52;
    --condos-mint-rgb: 102, 209, 158;
    --condos-lime-rgb: 184, 224, 111;
    --condos-dark-rgb: 15, 23, 20;

    /* Superficies y texto. */
    --color-ink: var(--condos-ink);
    --color-ink-soft: #344139;
    --color-slate-700: #4d5a53;
    --color-slate-600: var(--condos-muted);
    --color-slate-500: #89948e;
    --color-primary: var(--condos-green);
    --color-primary-hover: #276c4e;
    --color-primary-strong: var(--condos-green-dark);
    --color-primary-bright: var(--condos-mint);
    --color-primary-soft: #e8f4ee;
    --color-primary-faint: #f1f8f4;
    --color-accent: var(--condos-lime);
    --color-accent-strong: #789b3f;
    --color-accent-soft: #f2f8e4;
    --color-success: var(--condos-mint);
    --color-success-strong: var(--condos-green);
    --color-success-soft: #e7f8ef;
    --color-surface: #ffffff;
    --color-surface-soft: var(--condos-canvas);
    --color-surface-tint: #fbfdfc;
    --color-surface-dark: var(--condos-dark);
    --color-border: rgba(var(--condos-green-dark-rgb), 0.11);
    --color-border-strong: rgba(var(--condos-green-dark-rgb), 0.18);

    /* Estados semánticos. Verde/mint = marca, acción y confirmación; lima = acento complementario. */
    --color-info: #4b9b73;
    --color-warning: #d99532;
    --color-danger: #d94f5c;

    /* Tipografía nativa para evitar una descarga crítica de fuentes. */
    --font-body: "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Forma, profundidad y movimiento compartidos. */
    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.4375rem;
    --radius-xl: 1.875rem;
    --shadow-soft: 0 18px 48px rgba(var(--condos-dark-rgb), 0.075);
    --shadow-raised: 0 28px 72px rgba(var(--condos-dark-rgb), 0.11);
    --shadow-brand: 0 16px 36px rgba(var(--condos-green-rgb), 0.22);
    --ease-premium: cubic-bezier(.22, 1, .36, 1);

    /* Escala neutral compartida con Admin/Flutter (DesignSystem/condos.tokens.json). */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --control-touch-min: 2.75rem;
    --control-height-sm: 2.5rem;
    --control-height-md: 3rem;
    --control-height-lg: 3.25rem;
    --layout-admin-max: 100rem;

    --mud-typography-default-family: var(--font-body);
}

html {
    scroll-behavior: smooth;
    background: var(--color-surface-soft);
    max-width: 100%;
    overflow-x: clip;
}

html,
body,
button,
input,
textarea,
select {
    font-family: var(--font-body);
}

body {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
    color: var(--color-ink);
    background: var(--color-surface);
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


:where(main, footer) p {
    line-height: 1.68;
    text-wrap: pretty;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

input::placeholder,
textarea::placeholder {
    color: #95a09a;
    opacity: 1;
}

.trial-reassurance {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    margin: .72rem 0 0;
    color: var(--color-slate-600);
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.5;
}

.trial-reassurance::before {
    content: "";
    width: .48rem;
    height: .48rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--color-primary-bright);
    box-shadow: 0 0 0 .2rem rgba(var(--condos-mint-rgb), .12);
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
.button,
.eyebrow,
.section-label {
    font-family: var(--font-display);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
a { color: inherit; }
img, svg { max-width: 100%; }
main, section, header, footer, nav, article, aside, .shell { min-width: 0; }
h1, h2, h3, h4 { letter-spacing: -0.044em; line-height: 1.04; }
h1:focus { outline: none; }

::selection {
    color: var(--condos-dark);
    background: rgba(var(--condos-mint-rgb), 0.38);
}

:where(a, button, input, textarea, select, summary):focus-visible {
    outline: 3px solid rgba(var(--condos-green-rgb), 0.30);
    outline-offset: 3px;
}

.shell {
    width: min(1320px, calc(100% - 3rem));
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
}

.shell > * { min-width: 0; }

.section-block { padding: 2rem 0; }

.eyebrow,
.section-label {
    display: inline-block;
    color: var(--color-primary);
    font-size: 0.68rem;
    letter-spacing: 0.105em;
    font-weight: 800;
    text-transform: uppercase;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.15rem;
    padding: 0.82rem 1.25rem;
    border-radius: 0.95rem;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 750;
    border: 1px solid transparent;
    transition:
        transform 220ms var(--ease-premium),
        box-shadow 220ms var(--ease-premium),
        background-color 220ms ease,
        border-color 220ms ease,
        color 220ms ease;
}

.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0) scale(0.99); }

.button--primary {
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary) 0%, #276c4e 100%);
    box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,0.24);
}

.button--primary:hover {
    background: linear-gradient(135deg, #348a63 0%, var(--color-primary-strong) 118%);
    box-shadow: 0 20px 42px rgba(var(--condos-green-rgb), 0.28), inset 0 1px 0 rgba(255,255,255,0.24);
}

.button--outline,
.button--ghost {
    color: var(--color-primary-strong);
    background: rgba(255,255,255,0.88);
    border-color: rgba(var(--condos-green-dark-rgb), 0.15);
    box-shadow: 0 8px 22px rgba(var(--condos-dark-rgb), 0.035);
}

.button--outline:hover,
.button--ghost:hover {
    color: var(--color-primary);
    border-color: rgba(var(--condos-green-rgb), 0.28);
    background: var(--color-primary-faint);
}

.button--small {
    min-height: 2.55rem;
    padding: 0.65rem 1rem;
    font-size: 0.72rem;
}

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-success); }
.invalid { outline: 1px solid var(--color-danger); }
.validation-message { color: var(--color-danger); }

.blazor-error-boundary {
    background: #a63848;
    padding: 1rem 1rem 1rem 3.7rem;
    color: #fff;
}

.blazor-error-boundary::after { content: "An error has occurred."; }

.error-page {
    display: grid;
    justify-items: start;
    gap: 0.8rem;
    min-height: 60vh;
    align-content: center;
}

.error-page p { max-width: 42rem; color: var(--color-slate-600); }

@media (max-width: 720px) {
    .shell { width: min(calc(100% - 2rem), 1320px); }
    .section-block { padding: 1.6rem 0; }
    .button { max-width: 100%; }
    .eyebrow,
    .section-label { max-width: 100%; line-height: 1.4; letter-spacing: .09em; }
}

@media (max-width: 390px) {
    .shell { width: min(calc(100% - 1.5rem), 1320px); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .button { transition: none; }
}

/* Condos custom form controls: native values remain in the form, visual interaction is brand-owned. */
.condos-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

select.condos-select__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.condos-select__trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    width: 100%;
    min-height: 3rem;
    padding: .72rem .9rem;
    border: 1px solid #d7ebe1;
    border-radius: .9rem;
    color: #17201c;
    background: linear-gradient(180deg, #fff, #fbfdfc);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
    font: inherit;
    font-size: .86rem;
    font-weight: 650;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.condos-select__trigger:hover {
    border-color: #9ed9bd;
    background: #fff;
}

.condos-select__trigger:focus-visible,
.condos-select.is-open .condos-select__trigger {
    outline: none;
    border-color: #66d19e;
    box-shadow: 0 0 0 .22rem rgba(46,125,90,.10), 0 10px 24px rgba(15,23,20,.06);
}

.condos-select__chevron {
    position: relative;
    width: .8rem;
    height: .45rem;
    margin-right: .05rem;
    transition: transform .2s cubic-bezier(.22,1,.36,1);
}

.condos-select__chevron::before,
.condos-select__chevron::after {
    content: "";
    position: absolute;
    top: .16rem;
    width: .48rem;
    height: 1.8px;
    border-radius: 999px;
    background: #2e7d5a;
}

.condos-select__chevron::before {
    left: .02rem;
    transform: rotate(40deg);
}

.condos-select__chevron::after {
    right: .02rem;
    transform: rotate(-40deg);
}

.condos-select.is-open .condos-select__chevron {
    transform: rotate(180deg);
}

.condos-select__menu {
    position: absolute;
    z-index: 90;
    top: calc(100% + .45rem);
    left: 0;
    right: 0;
    display: grid;
    gap: .22rem;
    max-height: min(19rem, 42vh);
    padding: .42rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid #d7ebe1;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 20px 48px rgba(15,23,20,.14), 0 2px 12px rgba(15,23,20,.06);
}

.condos-select__menu[hidden] {
    display: none !important;
}

.condos-select__menu [data-condos-select-option] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-height: 2.75rem;
    padding: .66rem 2.2rem .66rem .75rem;
    border: 0;
    border-radius: .72rem;
    color: #344139;
    background: transparent;
    font: inherit;
    font-size: .82rem;
    font-weight: 620;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, transform .16s ease;
}

.condos-select__menu [data-condos-select-option]::after {
    content: "";
    position: absolute;
    right: .82rem;
    width: .52rem;
    height: .52rem;
    border-radius: 50%;
    background: #2e7d5a;
    box-shadow: 0 0 0 .2rem rgba(46,125,90,.10);
    opacity: 0;
    transform: scale(.65);
    transition: opacity .16s ease, transform .16s ease;
}

.condos-select__menu [data-condos-select-option]:hover,
.condos-select__menu [data-condos-select-option]:focus-visible {
    outline: none;
    color: #164534;
    background: #f1f8f4;
}

.condos-select__menu [data-condos-select-option][aria-selected="true"] {
    color: #164534;
    background: #e7f8ef;
    font-weight: 760;
}

.condos-select__menu [data-condos-select-option][aria-selected="true"]::after {
    opacity: 1;
    transform: scale(1);
}

main :is(section[id], article[id]) {
    scroll-margin-top: 4.85rem;
}

@media (max-width: 760px) {
    .condos-select__trigger,
    .condos-select__menu [data-condos-select-option] {
        min-height: 2.9rem;
        font-size: .92rem;
    }

    .condos-select__menu {
        max-height: min(18rem, 50svh);
    }

    main :is(section[id], article[id]) {
        scroll-margin-top: 4.45rem;
    }
}

/* Iconografía pública: un solo sistema visual, con marcas externas reconocibles cuando aportan significado. */
.condos-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    overflow: visible;
    vertical-align: -0.12em;
}

.condos-icon [data-stroke="true"] {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.condos-icon [data-fill="true"] {
    fill: currentColor;
    stroke: none;
}

.button .condos-icon,
a .condos-icon,
button .condos-icon {
    font-size: 1.05em;
    transition: transform 220ms var(--ease-premium);
}

.button:hover > .condos-icon[data-condos-icon="arrow-right"],
a:hover > .condos-icon[data-condos-icon="arrow-right"],
button:hover > .condos-icon[data-condos-icon="arrow-right"] {
    transform: translateX(2px);
}

.button:hover > .condos-icon[data-condos-icon="arrow-up-right"],
a:hover > .condos-icon[data-condos-icon="arrow-up-right"] {
    transform: translate(1px, -1px);
}