/* =========================================================================
   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 — 5 tonos con nombre, con roles fijos */
    --paper: #ede8dc;              /* papel de calán — fondo base */
    --paper-raised: #f7f4ea;       /* superficie elevada (tarjetas) */
    --ink: #20262b;                /* tinta — texto principal */
    --ink-soft: #565f63;           /* tinta diluida — texto secundario */
    --blueprint: #2c5270;          /* azul de plano — identidad, estructura */
    --blueprint-deep: #1d3b52;     /* azul de plano, variante oscura (hover) */
    --stamp: #b2502b;              /* terracota — SOLO el CTA dominante (el "sello") */
    --stamp-deep: #8f4020;         /* terracota oscuro (hover del CTA) */
    --line: #cabf9d;               /* línea de cota / hairline */
    --line-soft: #ddd5bc;

    --paper-contrast: #fffdf8;
    --ink-on-blueprint: #f2f1ea;
    --ink-on-stamp: #fdf6ee;

    /* Tipografía — 3 roles distintos, sin solapar */
    --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-data: "IBM Plex 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;

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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

body {
    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: el "sello" del profesional matriculado — terracota,
   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);
}

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