/* =========================================================================
   Portal de Inmobiliaria y Arquitectura — sistema de diseño
   Dirección: plano técnico de arquitectura. Papel de calán, tinta de plano,
   líneas de cota, marcas de registro — el vocabulario visual real del
   oficio del profesional (arquitecto + corredor), no una plantilla
   inmobiliaria genérica. Precisión = confianza (Principio I, constitución).
   ========================================================================= */

:root {
    /* Color — identidad ECO URBAN. Antes esta paleta y la de edu-v3.css
       (--v3-navy, --v3-amber/--v3-gold, --v3-green...) eran dos
       aproximaciones distintas al mismo logo, con hex distintos para el
       mismo rol (dos azules, dos ámbares, dos verdes). Los valores de acá
       ahora son los reales, muestreados por píxel del isotipo en
       docs/paleta-logo1.md — esa es la fuente de verdad de la marca; los
       tokens --v3-* de edu-v3.css son alias de estos (ver ese archivo).
       El azul es el único color de acción/enlace del sitio; dorado y
       naranja marcan el CTA dominante (nunca el azul), verde es acento
       de marca. Se mantienen los nombres de token históricos
       (--blueprint, --stamp) para que todo lo que ya usa var(--blueprint)
       etc. en cualquier página se retematice solo. */
    --paper: #F6F3EA;              /* crema tibio — fondo base */
    --paper-raised: #FFFFFF;       /* superficie elevada (tarjetas) */
    --ink: #191C2E;                /* tinta — texto principal */
    --ink-soft: #5A5F72;           /* tinta diluida — texto secundario */
    --blueprint: #0A2A4A;          /* azul marino real del logo — identidad y único color de acción */
    --blueprint-deep: #08243F;     /* azul marino, sombra 15% (docs/paleta-logo1.md) — variante oscura (hover) */
    --stamp: #0A2A4A;              /* el CTA dominante se diferencia por relleno sólido, no por un segundo matiz */
    --stamp-deep: #08243F;
    --line: #D8D3C4;               /* línea de cota / hairline */
    --line-soft: #E4DFD1;

    --paper-contrast: #FDFCF8;
    --ink-on-blueprint: #FFFFFF;
    --ink-on-stamp: #FFFFFF;

    /* Resto de la paleta ECO URBAN — estado/jerarquía, nunca acción. */
    --green: #6AA043;              /* verde real del logo — fondos/badges/iconografía, NO como texto: sobre --paper da 2.8:1 (falla AA) */
    --green-deep: #4A702F;         /* verde, sombra 30% — variante de texto (5.2:1 sobre --paper, AA ok); eyebrows y labels van con este */
    --green-vivid: #17C117;        /* excepción fuera de la paleta del logo — solo gráficos grandes / texto chico sobre fondo navy oscuro */
    --amber: #EDB52C;              /* dorado real del logo — color de acción/CTA primario */
    --amber-hi: #EF9A22;           /* naranja real del logo — variante cálida de hover del CTA dorado */
    --orange: #E4632F;             /* naranja-rojo real del logo — acento puntual (cintillo "Reservado") */
    --field: #FDFCF8;              /* fondo de inputs */
    --shade: #EDE9DE;              /* fondo de foto ausente */
    --hairline: #EFEBE0;

    /* Tipografía — 3 roles distintos, sin solapar */
    --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-data: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4.5rem;
    --space-6: 7rem;

    --max-content-width: 1280px;
    --touch-target-min: 44px;
    --radius: 3px;
    --radius-lg: 8px;

    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---- Tipografía --------------------------------------------------- */

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.15;
    margin: 0 0 var(--space-2);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1 {
    font-size: clamp(2.1rem, 5.5vw, 3.5rem);
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2.15rem);
}

h3 {
    font-size: 1.2rem;
}

p {
    margin: 0 0 var(--space-2);
    max-width: 62ch;
    color: var(--ink-soft);
}

a {
    color: var(--blueprint);
}

/* Cifras, precios, medidas, códigos: siempre en mono — la convención de
   cota de un plano técnico. Es la firma tipográfica del sitio. */
.dato,
.dato * {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

/* ---- Layout full-viewport ------------------------------------------ */

.full-bleed {
    width: 100%;
    padding-inline: var(--space-2);
}

.full-bleed > .content-inner {
    max-width: var(--max-content-width);
    margin-inline: auto;
}

.full-bleed + .full-bleed {
    border-top: 1px solid var(--line-soft);
}

section.full-bleed {
    padding-block: var(--space-4);
}

@media (min-width: 768px) {
    .full-bleed {
        padding-inline: var(--space-4);
    }
    section.full-bleed {
        padding-block: var(--space-5);
    }
}

@media (min-width: 1200px) {
    .full-bleed {
        padding-inline: var(--space-6);
    }
}

.container-narrow {
    max-width: 640px;
    margin-inline: auto;
}

/* ---- Línea de cota — firma visual del sitio -------------------------
   Divisor estructural con marcas de extremo, como la línea de cota de un
   plano. Se usa entre secciones y para separar bloques de contenido. */
.linea-de-cota {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-block: var(--space-3);
    color: var(--ink-soft);
    font-family: var(--font-data);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.linea-de-cota::before,
.linea-de-cota::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
    position: relative;
}

.linea-de-cota::before {
    border-left: 1px solid var(--line);
}

.linea-de-cota::after {
    border-right: 1px solid var(--line);
}

/* ---- Marco de plano — marcas de registro en las esquinas -----------
   Envuelve imágenes/tarjetas con pequeñas marcas en dos esquinas
   opuestas, como las marcas de registro de una lámina técnica. */
.marco-de-plano {
    position: relative;
}

.marco-de-plano::before,
.marco-de-plano::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    z-index: 2;
}

.marco-de-plano::before {
    top: 6px;
    left: 6px;
    border-top: 2px solid var(--paper-contrast);
    border-left: 2px solid var(--paper-contrast);
    opacity: 0.85;
}

.marco-de-plano::after {
    bottom: 6px;
    right: 6px;
    border-bottom: 2px solid var(--paper-contrast);
    border-right: 2px solid var(--paper-contrast);
    opacity: 0.85;
}

/* ---- Controles y botones -------------------------------------------- */

button,
.btn,
a.btn,
input,
select,
textarea {
    min-height: var(--touch-target-min);
    font-size: 1rem;
    font-family: var(--font-body);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.15s var(--ease), background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.btn:active {
    transform: translateY(1px);
}

/* El CTA dominante: relleno sólido en el único color de acción del sitio,
   reservado exclusivamente para la acción principal de cada página
   (Principio IV de la constitución). */
.btn-cta {
    background: var(--stamp);
    color: var(--ink-on-stamp);
    border-color: var(--stamp);
}

.btn-cta:hover {
    background: var(--stamp-deep);
    border-color: var(--stamp-deep);
}

/* Única excepción de color a "el azul es la única acción": el cierre del home
   (fondo oscuro, PedidoRepetido.razor) usa ámbar para que el CTA no se pierda
   contra un fondo que ya usa --ink. */
.btn--amber {
    background: var(--amber);
    color: var(--ink);
    border-color: var(--amber);
}

.btn--amber:hover {
    background: var(--amber-hi);
    border-color: var(--amber-hi);
    color: var(--ink);
}

/* Botón "ghost" sobre fondo oscuro (nav del hero) — HeroCarousel.razor. */
.btn--ghost-light {
    border-color: rgba(255, 255, 255, .55);
    color: #FFF;
    height: 40px;
    padding-inline: 1.1rem;
    font-size: 0.95rem;
}

.btn--ghost-light:hover {
    background: #FFF;
    border-color: #FFF;
    color: var(--ink);
}

.btn-secondary {
    background: transparent;
    color: var(--blueprint);
    border-color: var(--blueprint);
}

.btn-secondary:hover {
    background: var(--blueprint);
    color: var(--ink-on-blueprint);
}

/* Botón de contacto persistente al hacer scroll (Principio III / FR-003) */
.contacto-sticky {
    position: sticky;
    bottom: 0;
    z-index: 50;
}

/* Accesibilidad básica: foco visible en todo control interactivo (FR-022a) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--blueprint);
    outline-offset: 2px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ---- Formularios públicos -------------------------------------------- */

.form label {
    display: block;
    margin-top: var(--space-2);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form input,
.form select,
.form textarea {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-contrast);
    color: var(--ink);
    font-family: var(--font-body);
}

.form input[type="checkbox"] {
    width: auto;
    display: inline-block;
    min-height: auto;
    margin: 0 0.5em 0 0;
    vertical-align: middle;
}

.form label:has(input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--ink);
}

.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
    border-color: var(--blueprint);
}

.form fieldset {
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--blueprint);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin: 0;
}

.form legend {
    font-family: var(--font-data);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--blueprint-deep);
    padding-inline: 0.4rem;
}

.form .btn {
    margin-top: var(--space-3);
}

.validation-summary {
    color: #a3232e;
    font-weight: 600;
}