/* =========================================================================
   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 — paleta adoptada de docs/plantilla2 (naranja/verde/ámbar/crema),
       reemplazando la identidad azul marino/dorado de ECO URBAN. 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 — el naranja pasa a ser el único color de
       acción/enlace del sitio, verde queda para WhatsApp/CTA secundario y
       ámbar para números y acentos destacados. Los tokens --v3-* de
       edu-v3.css son alias de estos (ver ese archivo). */
    --paper: #FBF7EF;              /* crema — fondo base (docs/plantilla2) */
    --paper-raised: #FFFFFF;       /* superficie elevada (tarjetas) */
    --ink: #2B2A26;                /* tinta — texto principal (docs/plantilla2) */
    --ink-soft: #5B5648;           /* tinta diluida — texto secundario (docs/plantilla2) */
    --blueprint: #E8622C;          /* naranja — identidad y único color de acción (docs/plantilla2) */
    --blueprint-deep: #C25423;     /* naranja, variante oscura (hover) */
    --stamp: #E8622C;              /* el CTA dominante se diferencia por relleno sólido, no por un segundo matiz */
    --stamp-deep: #C25423;
    --line: #EAE3D6;               /* línea de cota / hairline (docs/plantilla2) */
    --line-soft: #F1ECDF;

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

    /* Resto de la paleta — estado/jerarquía, nunca acción. */
    --green: #5C8A3A;              /* WhatsApp / CTA secundario (docs/plantilla2) */
    --green-deep: #4D7530;         /* verde, variante de texto — eyebrows y labels van con este */
    --green-vivid: #17C117;        /* excepción — solo gráficos grandes / texto chico sobre fondo oscuro */
    --amber: #F2A73B;              /* números destacados / acento (docs/plantilla2) */
    --amber-hi: #F5B65C;           /* variante cálida de hover del acento ámbar */
    --orange: #E8622C;             /* acento puntual (cintillo "Reservado") — mismo naranja de marca */
    --field: #FDFCF8;              /* fondo de inputs */
    --shade: #EDE9DE;              /* fondo de foto ausente */
    --hairline: #EFEBE0;

    /* Tipografía — Poppins (headings) + Inter (cuerpo), docs/plantilla2;
       --font-data se mantiene en JetBrains Mono — es la firma tipográfica
       de "cota de plano técnico" del sitio, sin equivalente en plantilla2. */
    --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", 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: 700;
    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);
}

/* Sin el combinador ">": misma especificidad que .container-narrow (línea de
   abajo), así que en un elemento con ambas clases gana la declarada después
   en la cascada. Content-inner siempre es hijo directo de .full-bleed en el
   markup, así que acotar el selector no cambia a qué aplica. */
.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;
}

/* FocusOnNavigate (Routes.razor) le pone tabindex="-1" y foco por JS al <h1>
   en cada carga de página, para que lectores de pantalla anuncien el título.
   No es alcanzable con Tab, así que el contorno de foco por defecto del
   navegador ahí no cumple ninguna función visual — solo se ve como un
   recuadro negro pegado al título. */
[tabindex="-1"]:focus {
    outline: none;
}

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

/* Visible solo para lectores de pantalla — p.ej. un heading intermedio para
   no saltear niveles (h1 → h3) sin agregar texto visible de más. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Checkboxes/radios nativos con el color de marca en vez del azul del SO —
   sin esto, la home (con Bootstrap) y el resto del sitio (controles nativos)
   se sentían como dos productos distintos. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--blueprint);
}

/* Flecha propia en los <select> nativos — mismo trazo que .catalogo__filtros
   details/.hero__flecha, para no depender del glifo del navegador. */
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%235A5F72' stroke-width='1.5' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
    padding-right: 2.25rem;
}

/* ---- 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-color: 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: flex-start;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--ink);
}

/* Con label de dos líneas, alinear el check al primer renglón en vez de
   centrarlo contra el bloque completo de texto. */
.form label:has(input[type="checkbox"]) input[type="checkbox"] {
    margin-top: 0.2em;
}

.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
    border-color: var(--blueprint);
    box-shadow: 0 0 0 3px rgba(10, 42, 74, .16);
}

.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;
}