@import './tokens.css';

/* ==========================================================================
   Sitio público — Santiago Gonzalez & Asoc. Inmuebles
   --------------------------------------------------------------------------
   Implementación 1:1 del Figma "Gonzales web" (ceOgKuIhdONXyuYzCOPnMA).
   Breakpoints del archivo: desktop 1440, mobile 375. No hay frame de tablet.
   Todos los valores vienen de tokens.css — no hardcodear nada acá.
   ========================================================================== */

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--color-surface-page);
    color: var(--color-text-primary);
    font-family: var(--font-base);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-nav);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; }

/* Foco visible en todo lo interactivo (el Figma no define el estado). */
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   Utilidades
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.icon { width: 1em; height: 1em; flex: none; }

/* --- Botones ------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    font-family: var(--font-base);
    text-align: center;
    transition: background-color .15s ease;
}

.btn--primary {
    /* Padding por defecto para los botones sin tamaño fijo. Equivale al del
       botón "Enviar" del Figma (125×42 con texto de 16px). Las reglas con
       ancho/alto explícito (.btn--lg, Enviar) lo sobreescriben. */
    padding: 9px 30px;
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-radius: var(--radius-field);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-md);
}

.btn--primary:hover { background: var(--color-accent-hover); }
.btn--primary:active { background: var(--color-accent-active); }

.btn:disabled,
.btn[aria-disabled="true"] {
    background: var(--color-disabled-surface);
    color: var(--color-disabled-text);
    cursor: not-allowed;
}

/* "Ver más" — 9:133 (182×66) */
.btn--lg { width: 182px; height: 66px; }

/* ==========================================================================
   Header — 26:70 (1440×188)
   Va superpuesto sobre la foto del hero, con el overlay rojo al 70%.
   ========================================================================== */
/* En las páginas internas (listado, detalle, tasaciones, emprendimientos) el
   header es rojo sólido — verificado sobre el frame 94:19007, que renderiza
   #DB001B pleno. El overlay al 70% es exclusivo del Home, donde deja ver la
   foto del hero. */
.site-header {
    position: relative;
    z-index: 10;
    height: var(--header-height);
    background: var(--color-accent);
    color: var(--color-text-on-dark);
}

.site-header--overlay {
    position: absolute;
    inset: 0 0 auto 0;
    background: var(--color-header-overlay);
}

.site-header__inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding-bottom: 10px;
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
}

/* Logo 171×72 — 26:76 */
.site-header__logo { flex: none; }
.site-header__logo img { width: 171px; height: 72px; }

/* Nav: items de ancho fijo con gap 11px — 26:72..26:75 */
.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-nav-gap);
    margin-left: auto;
}

.site-nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 43.606px;
    font-size: var(--font-size-nav);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-nav);
    text-align: center;
    transition: opacity .15s ease;
}

.site-nav__link:hover { opacity: .8; }

/* Anchos exactos por ítem (el Figma los fija uno por uno) */
.site-nav__link--empresa { width: 97px; }
/* "Propiedades" no está en el nav del archivo: el ancho sale de medir su tinta. */
.site-nav__link--propiedades { width: 104px; }
.site-nav__link--emprendimientos { width: 129px; }
.site-nav__link--tasaciones { width: 98px; }
.site-nav__link--contactos { width: 104px; }

/* "Tasaciones" está en Bold en el Figma: es la página activa del mockup. */
.site-nav__link.is-active { font-weight: var(--font-weight-bold); }

/* Redes — 94:18998..94:19000, gap 19px, alineadas al borde del contenedor */
.site-social {
    display: flex;
    align-items: center;
    gap: 19px;
    margin-left: 19px;
}

.site-social__link { display: flex; transition: opacity .15s ease; }
.site-social__link:hover { opacity: .8; }
.site-social__link--instagram svg { width: 22px; height: 22px; }
.site-social__link--youtube svg { width: 28px; height: 29px; }
.site-social__link--facebook svg { width: 26px; height: 25px; }

/* Botón hamburguesa: solo mobile */
.site-header__burger { display: none; }

/* ==========================================================================
   Home — hero (5:34, 734px de alto)
   ========================================================================== */
.hero {
    position: relative;
    height: var(--hero-height);
}

.hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Barra de búsqueda — 129:4263 (1067×59, top 435) -------------------- */
.hero__search {
    position: absolute;
    top: 435px;
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--searchbar-width), calc(100% - 32px));
}

.search-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--searchbar-height);
    padding-left: var(--space-searchbar-inset);
    padding-right: 18.65px;
    background: var(--color-surface);
    border-radius: var(--radius-searchbar);
}

.search-bar__field {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
}

/* Los dos primeros campos miden 242.61px de contenido; el de Ubicación
   suma el pin (24px) + 11px de separación → 257.61px. */
.search-bar__field--operacion,
.search-bar__field--propiedad { width: 242.61px; }
.search-bar__field--ubicacion { width: 257.61px; gap: 11px; }

.search-bar__pin {
    flex: none;
    width: var(--icon-size-pin);
    height: var(--icon-size-pin);
    color: var(--color-icon-muted);
}

/* El <select> real, invisible: conserva accesibilidad y teclado. */
.search-bar__select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    font-family: var(--font-base);
    font-size: var(--font-size-field);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    cursor: pointer;
}

/* Sin elección el combo muestra el nombre del campo, y se lee como placeholder:
   más claro que un valor elegido, pero sobre blanco todavía pasa AA (4.83:1). */
.search-bar__select--vacio { color: var(--color-text-muted); }

/* Flecha propia (21.927px) — se reemplaza la nativa del navegador. */
.search-bar__arrow {
    flex: none;
    width: var(--icon-size-arrow);
    height: var(--icon-size-arrow);
    margin-left: auto;
    color: var(--color-text-primary);
    pointer-events: none;
}

/* Divisor vertical 1×44 — 7:67 / 90:18933 */
.search-bar__divider {
    flex: none;
    width: 1px;
    height: 44px;
    background: var(--color-divider);
}

/* Botón Buscar — 7:61 (147.349×44) */
/* Desviación del Figma (7:61/7:62, que lo dibuja chico, bold y de radio 6.9): a pedido
   del cliente el botón usa la misma apariencia que la pill "Buscar por código" (7:87)
   — cápsula, cuerpo 16 regular — conservando el alto que entra en la barra. */
.search-bar__submit {
    flex: none;
    width: 147.349px;
    height: 44px;
    padding: 8.96px 44.799px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: var(--font-size-field);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    transition: background .15s ease;
}

.search-bar__submit:hover { background: var(--color-accent-hover); }

/* --- Pill "Buscar por código" — 7:87 (216×50, radio 28) -----------------

   La pill y el campo ocupan la misma celda del grid: uno se desvanece mientras
   el otro aparece, y el contenedor se ensancha, así el cambio se lee como que
   la pill se abre y no como que un elemento reemplaza a otro. ------------- */
.hero__code {
    position: absolute;
    top: 560.779px;
    left: 50%;
    transform: translateX(calc(-50% - 17px));
    display: grid;
    /* minmax(0,…) para que el ancho por defecto del <input> (20 caracteres) no
       estire la celda: los dos hijos miden lo que mide la caja, y así el ancho
       del contenedor es el que anima. */
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: var(--hero-pill-width);
    transition: width .28s cubic-bezier(.4, 0, .2, 1);
}

/* Con JavaScript los dos comparten celda y se turnan; sin él se apilan, que es
   la razón del gap y de que la altura la pongan los hijos y no el contenedor. */
.hero__code--js {
    gap: 0;
    height: var(--hero-pill-height);
}

.hero__code--js > * {
    grid-area: 1 / 1;
}

.hero__code-search {
    display: inline-flex;
    align-items: center;
    gap: 4.19px;
    width: 100%;
    min-height: var(--hero-pill-height);
    padding: 14px 9px 15px 25px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-text-on-dark);
    font-size: var(--font-size-field);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    cursor: pointer;
    transition: background .15s ease, opacity .18s ease, transform .28s cubic-bezier(.4, 0, .2, 1);
}

.hero__code-search:hover { background: var(--color-accent-hover); }

.hero__code-search .icon {
    flex: none;
    width: var(--icon-size-search);
    height: var(--icon-size-search);
    color: var(--color-icon-on-dark);
}

/* Campo de código: la misma cápsula roja, para que la pill parezca abrirse. */
.hero__code-form {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: var(--hero-pill-height);
    padding: 0 6px 0 22px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    transition: opacity .18s ease, transform .28s cubic-bezier(.4, 0, .2, 1);
}

.hero__code-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-on-dark);
    font-family: var(--font-base);
    font-size: var(--font-size-field);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
}

.hero__code-input::placeholder {
    color: rgba(255, 255, 255, .85);
}

.hero__code-input:focus { outline: none; }

/* La cápsula entera toma el foco visible: el input no tiene borde propio. */
.hero__code-form:focus-within {
    outline: 2px solid var(--color-text-on-dark);
    outline-offset: 2px;
}

.hero__code-input::-webkit-search-cancel-button { display: none; }

.hero__code-submit {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-icon-on-dark);
    cursor: pointer;
    transition: background .15s ease;
}

.hero__code-submit:hover { background: var(--color-accent-hover); }

.hero__code-submit .icon {
    width: var(--icon-size-search);
    height: var(--icon-size-search);
}

/* Con JavaScript sólo se ve uno de los dos por vez; el otro no recibe foco. */
.hero__code--js .hero__code-form,
.hero__code--js.hero__code--abierto .hero__code-search {
    opacity: 0;
    transform: scale(.97);
    visibility: hidden;
    pointer-events: none;
}

.hero__code--js.hero__code--abierto {
    width: var(--hero-pill-width-open);
}

.hero__code--js.hero__code--abierto .hero__code-form {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .hero__code,
    .hero__code-search,
    .hero__code-form { transition: none; }
}

/* --- Accesos directos del hero — 94:18979..94:18988 (37.807px, gap 10.193) */
.hero__actions {
    position: absolute;
    top: 670px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: flex-end;
    gap: var(--hero-action-gap);
    width: 100%;
    max-width: var(--container-width);
}

.hero__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hero-action-size);
    height: var(--hero-action-size);
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text-on-dark);
    transition: background-color .15s ease;
}

.hero__action:hover { background: var(--color-accent-hover); }
.hero__action svg { width: 18.518px; height: 18.518px; }

/* ==========================================================================
   Inmuebles destacados — 8:157 (fondo) + 9:108 (grilla)
   ========================================================================== */
.featured {
    padding-top: 63px;
    padding-bottom: 66px;
    background: var(--color-surface-section);
}

/* 9:142 — Bold 32px, tracking -0.96 */
.featured__title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin-bottom: 23px;
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-section);
    color: var(--color-text-primary);
    text-align: center;
}

.featured__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-grid-column);
    row-gap: var(--space-grid-row);
}

.featured__cta {
    display: flex;
    justify-content: center;
    padding-top: 66px;
}

/* --- Card de propiedad — 9:33 ------------------------------------------- */
.property-card {
    position: relative;
    display: block;
    min-height: var(--card-height);
    padding: 12.95px 11.817px 0 var(--space-card-image-inset);
    border-radius: var(--radius-card);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-card);
    color: var(--color-text-primary);
}

.property-card__image {
    position: relative;
    height: var(--card-image-height);
    border-radius: var(--radius-card-image);
    overflow: hidden;
}

.property-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Código de la ficha — no está en el Figma. Va enfrentado al badge de operación,
   en la misma línea y del lado opuesto, con su misma caja tipográfica. Blanco
   sobre la foto para no repetir el rojo del badge. */
.badge--codigo {
    position: absolute;
    right: var(--space-card-inset);
    top: 256.66px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--card-badge-height);
    padding-inline: 14px;
    border-radius: var(--radius-badge);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-badge);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-lg);
}

/* Badge de operación — 9:18 (105.961×40.03, radio 6), montado sobre la foto */
.badge--operacion {
    position: absolute;
    left: var(--space-card-inset);
    top: 256.66px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--card-badge-width);
    height: var(--card-badge-height);
    border-radius: var(--radius-badge);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-size: var(--font-size-badge);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-lg);
}

.property-card__body {
    padding-left: calc(var(--space-card-inset) - var(--space-card-image-inset));
    padding-right: 18.795px;
}

/* 9:17 — Bold 24px, line-height 1.03, tracking -0.72 */
.property-card__title {
    padding-top: 33.6px;                        /* tinta del título en 1186 */
    max-width: 288.448px;
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-card);
    color: var(--color-text-primary);
}

/* 9:21 / 9:23 / 9:25 — Regular 12px en una fila */
/* El Figma reparte tres specs en anchos fijos (97.719 · 97.719 · 127.153). Con la
   superficie cubierta son cuatro y no entran, así que cada uno mide lo suyo y la
   fila puede cortarse si el texto es largo. */
.property-card__specs {
    display: flex;
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 4px;
    padding-top: 15.5px;
    font-size: var(--font-size-meta);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-sm);
    color: var(--color-text-primary);
}

.property-card__specs li { flex: none; }

.property-card__footer-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 32.3px;                        /* tinta de la dirección en 1300 */
}

/* 9:27 — Regular 12px, gris */
.property-card__address {
    font-size: var(--font-size-meta);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-sm);
    color: var(--color-text-muted);
}

/* 9:29 — Bold 20px, rojo, alineado a la derecha */
.property-card__price {
    font-size: var(--font-size-price);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-lg);
    color: var(--color-accent);
    text-align: right;
}

/* ==========================================================================
   Footer — 11:418 (1440×410, fondo #6b7280)
   Columnas en x: 129 / 368 / 672 / 945 (anchos 171 / 255 / 255 / 369).
   Se reproducen con tracks explícitos, incluidos los gutters reales.
   ========================================================================== */
.site-footer {
    height: var(--footer-height);
    background: var(--color-surface-footer);
    color: var(--color-text-on-dark);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 171px 68px 255px 49px 255px 18px 369px;
    align-items: start;
    width: 1185px;
    max-width: 100%;
    height: 100%;
    margin-inline: auto;
}

.site-footer__col--brand { grid-column: 1; padding-top: 142px; }
.site-footer__col--leloir { grid-column: 3; padding-top: 71px; }
.site-footer__col--castelar { grid-column: 5; padding-top: 71px; }
.site-footer__col--form { grid-column: 7; padding-top: 35px; }

.site-footer__logo { width: 171px; height: 72px; }

/* 10:24 — Bold 16px el nombre de la oficina, Regular 14.6px el resto */
.site-footer__office {
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-nav);
}

.site-footer__address,
.site-footer__contact {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-nav);
}

/* El Figma deja una línea en blanco entre la dirección y los teléfonos. */
.site-footer__contact { padding-top: 1.5em; }

.site-footer__contact a { text-decoration: underline; }
.site-footer__contact a:hover { text-decoration: none; }

/* Ícono de WhatsApp inline, 12×12 — 10:190 */
.contact-inline { display: inline-flex; align-items: center; gap: 4px; }
.contact-inline svg { width: 12px; height: 12px; }

/* --- Formulario de contacto — 11:417 (369×340) -------------------------- */
.contact-form__title {
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-md);
    text-align: center;
}

/* 6 gaps de 10px + los altos reales suman exactamente los 340px del bloque. */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
}

.contact-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10.71px;
}

.contact-form__input,
.contact-form__textarea {
    display: block;
    width: 100%;
    border: 0;
    border-radius: var(--radius-field);
    background: var(--color-surface-field);
    color: var(--color-text-primary);
    font-family: var(--font-base);
    font-size: var(--font-size-meta);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-sm);
}

.contact-form__input {
    height: 36.749px;
    padding-inline: 23px;
}

.contact-form__textarea {
    height: 68px;
    padding: 6px 26px;
    resize: vertical;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder { color: var(--color-text-muted); }

/* Enviar — 11:412 (125×42) */
.contact-form .btn--primary { width: 125px; height: 42px; }

/* ==========================================================================
   Listado — Figma "Buscador" 94:19101 (1440×2000) y "Búsqueda mobile" 94:26538
   --------------------------------------------------------------------------
   Header 0..188 · barra de filtros 253.73..319.5 · contenido 358..1589 ·
   footer 1590..2000. Fondo de página #FAFAFB.

   El frame desktop es un <symbol> sin hijos en la metadata del MCP, así que su
   geometría está medida sobre el export 1:1 — ver docs/figma-listado-detalle.md.
   ========================================================================== */
.listado {
    position: relative;
    background: var(--color-surface-section);
    padding-top: var(--space-list-top);
    padding-bottom: 1px;                        /* lista (1589) → footer (1590) */
}

/* --- Barra de filtros — 1197.26×65.77, radio 12 -------------------------- */
.listado__barra {
    width: var(--filterbar-width);
    height: var(--filterbar-height);
    margin-inline: auto;
    display: flex;
    align-items: stretch;
    background: var(--color-surface-field);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-control);
}

.listado__barra-filtros {
    flex: 0 0 calc(var(--filterbar-split) - 1px);   /* el borde izq. de la barra ya ocupa 1px */
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 29px;                         /* borde (121.74) → "Filtros" (151) */
    border-right: 1px solid var(--color-divider-strong);
}

.listado__filtros-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;                                  /* texto (…212) → icono (229) */
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: var(--font-size-filter);
    letter-spacing: var(--letter-spacing-filter);
    color: var(--color-text-primary);
}

.listado__filtros-icono {
    width: 42px;
    height: 29px;
    color: var(--color-border-chip);
}

/* Separador corto entre el icono y los chips — 1×47 en x 287 */
.listado__barra-sep {
    width: 1px;
    height: 47px;
    background: var(--color-divider-soft);
}

/* Chip de filtro activo — 85×39, radio pill */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 39px;
    margin-left: 21px;                          /* separador (288) → chip (325) */
    padding: 0 12px;
    border: 1px solid var(--color-border-chip);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-control);
    letter-spacing: var(--letter-spacing-control);
    /* #6B7280 — medido sobre el núcleo del trazo en el PNG. Antes usaba
       --color-icon-muted (#9C9CA3), que es el stroke del map-pin, no el texto. */
    color: var(--color-text-muted);
    white-space: nowrap;
}

.chip__quitar {
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

.chip__quitar .icon { width: 11px; height: 11px; }

/* Orden — el <select> real, con la flecha propia del archivo */
.listado__barra-orden {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 23px;                         /* separador (929) → texto (952) */
}

.listado__orden {
    appearance: none;
    width: 100%;
    background: none;
    border: 0;
    padding: 0 44px 0 0;
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-control);
    /* ExtraLight, igual que las opciones del desplegable (108:5064) */
    font-weight: var(--font-weight-extralight);
    letter-spacing: var(--letter-spacing-control);
    color: var(--color-text-muted);             /* #6B7280 (108:5064), no #9C9CA3 */
}

.listado__orden option {
    font-weight: var(--font-weight-extralight);
}

.listado__orden-flecha {
    position: absolute;
    right: 20px;                                /* chevron 1285..1298 dentro de la barra */
    width: 14px;
    height: 8px;
    color: var(--color-icon-muted);
    pointer-events: none;
}

/* --- Cuerpo: lista con scroll propio + mapa ----------------------------- */
.listado__cuerpo {
    position: relative;
    left: var(--list-content-offset);
    width: var(--list-content-width);
    margin-inline: auto;
    padding-top: var(--space-list-gap);
    display: grid;
    grid-template-columns: calc(var(--list-column-width) + var(--list-scroll-offset)) var(--map-width);
    justify-content: space-between;
}

.listado__resultados {
    height: var(--list-column-height);
    padding-right: var(--list-scroll-offset);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--list-card-gap);
    scrollbar-width: thin;
    scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-track);
}

/* La barra del archivo mide 2px; Firefox no baja de "thin". */
.listado__resultados::-webkit-scrollbar { width: 2px; }
.listado__resultados::-webkit-scrollbar-track { background: var(--color-scroll-track); }
.listado__resultados::-webkit-scrollbar-thumb { background: var(--color-scroll-thumb); }

.listado__mapa {
    margin-top: 1px;                            /* el mapa arranca en 359, la lista en 358 */
    height: var(--map-height);
    border-radius: var(--radius-map);
    overflow: hidden;
    position: sticky;
    top: var(--space-list-gap);
}

.listado__mapa img { width: 100%; height: 100%; object-fit: cover; }

/* Sólo mobile: resumen de resultados y pill flotante de filtros */
.listado__resumen,
.listado__pill { display: none; }

/* La barra de contexto y los controles sobre la foto sólo existen en mobile. */
.detalle__contexto,
.detalle__fav,
.detalle__prev,
.detalle__next { display: none; }

/* --- Panel de filtros — 94:24420 (623×2040) ------------------------------
   Se abre con el botón "Filtros" de la barra (desktop) o con el pill flotante
   (mobile). El archivo lo dibuja suelto, sin componer sobre el listado: el
   anclaje es decisión de la implementación, los valores son del archivo.
   ------------------------------------------------------------------------- */
.panel-filtros {
    position: absolute;
    z-index: 30;
    top: calc(var(--space-list-top) + var(--filterbar-height) + 8px);
    left: calc(50% - var(--filterbar-width) / 2);
    width: 623px;
    max-height: 2040px;
    overflow-y: auto;
    padding: 0 33px 40px 63px;                  /* texto en x=63, divisores hasta 590 */
    background: var(--color-surface);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-card);
    scrollbar-width: thin;
    scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-track);
}

.panel-filtros[hidden] { display: none; }

.panel-filtros__cerrar {
    position: absolute;
    top: 24px;
    right: 29px;                                /* × en x 575..594 */
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--color-text-primary);
}

.panel-filtros__cerrar .icon { width: 19px; height: 19px; }

.panel-filtros__seccion:first-of-type { margin-top: 38px; }

/* El divisor va debajo del TÍTULO, no al final de la sección: en el archivo
   cae en y=83.5, entre "Tipo de operación" (53) y "Venta" (102). */

.panel-filtros__seccion summary {
    display: flex;
    align-items: center;
    padding: 7.4px 0 9.6px;                     /* título en y=53, divisor en 83.5 */
    border-bottom: 1px solid var(--color-divider-soft);
    cursor: pointer;
    list-style: none;
    font-size: var(--font-size-filter-title);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-filter-title);
    color: var(--color-text-primary);
}

.panel-filtros__seccion summary::-webkit-details-marker { display: none; }

.panel-filtros__chevron {
    margin-left: auto;
    margin-right: 57px;                         /* chevron en x 516..533 */
    width: 18px;
    height: 10px;
    color: var(--color-text-primary);
}

.panel-filtros__opciones { padding: 6.85px 0 1.65px; }   /* 1ª opción en y=102 */

/* Filas de opción: paso 32.5, radio de 14 en x=63 y texto en x=89 */
.panel-filtros__opcion {
    display: flex;
    align-items: center;
    gap: 12px;                                  /* radio (…77) → texto (89) */
    height: 32.5px;
    font-size: var(--font-size-filter-option);
    letter-spacing: var(--letter-spacing-filter-option);
    color: var(--color-text-primary);
    cursor: pointer;
}

.panel-filtros__opcion input {
    appearance: none;
    flex: none;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1px solid var(--color-border-chip);
    border-radius: 50%;
    cursor: pointer;
}

.panel-filtros__opcion input:checked {
    border-color: var(--color-accent);
    background: radial-gradient(var(--color-accent) 0 45%, transparent 46%);
}

.panel-filtros__buscar {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-control);
    font: inherit;
    /* Open Sans — el archivo la usa sólo acá y en el botón "Aplicar" (82:3492) */
    font-family: var(--font-campo);
    font-size: var(--font-size-filter-option);
    letter-spacing: var(--letter-spacing-filter-option);
    color: var(--color-text-muted);
}

.panel-filtros__buscar::placeholder {
    font-family: var(--font-campo);
    color: var(--color-disabled-text);          /* #9C9CA3 (82:3492) */
    opacity: 1;                                 /* Firefox lo aclara por defecto */
}

/* Acciones del panel — "Aplicar" es 82:3492. El archivo sólo lo dibuja gris
   (deshabilitado, sin filtros elegidos); el estado activo no está diseñado y se
   resuelve con el rojo de la marca. */
.panel-filtros__acciones {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
}

.panel-filtros__aplicar {
    height: 44px;
    padding: 0 28px;
    background: var(--color-accent);
    border: 0;
    border-radius: var(--radius-badge);         /* 6px (82:3492) */
    cursor: pointer;
    font-family: var(--font-campo);             /* Open Sans, como el resto del panel */
    font-size: var(--font-size-filter-option);
    color: var(--color-on-accent);
}

.panel-filtros__aplicar:hover { background: var(--color-accent-hover); }

.panel-filtros__limpiar {
    font-family: var(--font-campo);
    font-size: var(--font-size-filter-option);
    color: var(--color-text-muted);
}

/* Listado sin resultados — el archivo no dibuja este estado. */
.listado__vacio {
    margin: 0;
    font-size: var(--font-size-control);
    letter-spacing: var(--letter-spacing-control);
    color: var(--color-text-muted);
}

.listado__vacio a { color: var(--color-accent); }

/* ==========================================================================
   Card de propiedad del listado — 550×310 (desktop) / 342×258 (mobile)
   ========================================================================== */
/* El alto del archivo es el del caso típico, no un techo: con un título de tres
   líneas ("Casa en Udaondo, Parque Leloir") el precio quedaba fuera de la card. */
.tarjeta {
    position: relative;
    flex: 0 0 auto;
    min-height: var(--list-card-height);
    width: var(--list-column-width);
    display: grid;
    grid-template-columns: var(--list-card-image-width) 1fr;
    background: var(--color-surface-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.tarjeta__foto {
    position: relative;
    height: 100%;
    border-radius: var(--radius-card) 0 0 var(--radius-card);
    overflow: hidden;
}

.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Badge de operación — 109×43, a 27 del borde izquierdo y 241 del tope */
.tarjeta__badge {
    position: absolute;
    left: 27px;
    top: 241px;
    display: grid;
    place-items: center;
    width: var(--list-badge-width);
    height: var(--list-badge-height);
    background: var(--color-accent);
    border-radius: var(--radius-badge);
    color: var(--color-text-on-accent);
    font-size: var(--font-size-badge);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-lg);
}

.tarjeta__cuerpo {
    padding: 45px var(--list-card-body-inset) 0;
    display: flex;
    flex-direction: column;
}

/* Sin margen propio: cuando la dirección es larga el código cae a la línea de
   abajo, y ahí tiene que alinear con ella y no quedar sangrado. */
.tarjeta__codigo {
    font-weight: var(--font-weight-bold);
}

.tarjeta__direccion {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px;
    font-size: var(--font-size-list-address);
    letter-spacing: var(--letter-spacing-list-address);
    color: var(--color-text-muted);
}

.tarjeta__titulo {
    margin-top: 21px;                           /* dirección (413) → título (447) */
    font-size: var(--font-size-list-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-list-title);
    color: var(--color-text-primary);
}

/* El Figma lista tres metadatos en columna; con la superficie cubierta son cuatro
   y el precio se salía de los 310px de la card, así que van de a dos por fila. */
.tarjeta__datos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    margin-top: 15px;                           /* título (498) → metadatos (517) */
    font-size: var(--font-size-list-meta);
    letter-spacing: var(--letter-spacing-list-meta);
    color: var(--color-text-primary);
}

.tarjeta__precio {
    margin-top: 26px;                           /* metadatos (571) → precio (609) */
    font-size: var(--font-size-list-price);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-list-price);
    color: var(--color-accent);
}

/* Controles que sólo existen en la card mobile */
.tarjeta__fav,
.tarjeta__prev,
.tarjeta__next,
.tarjeta__wsp { display: none; }

/* ==========================================================================
   Detalle — Figma "Individual" 19:599 (1440×2366) y "Individual mobile" 99:3512
   --------------------------------------------------------------------------
   Geometría exacta de nodo. Header 0..188 · galería 217..813 ·
   ficha 847..1267 · mapa 1317..1869 · footer 1956..2366.
   ========================================================================== */
.detalle {
    background: var(--color-surface-section);
    padding-top: 29px;                          /* header (188) → galería (217) */
    padding-bottom: 87px;                       /* mapa (1869) → footer (1956) */
}

.detalle__contenido {
    width: 1200px;                              /* 120..1320 */
    margin-inline: auto;
}

/* --- Galería: foto principal 792×596 + dos laterales 383×287 ------------- */
.detalle__galeria {
    display: grid;
    grid-template-columns: var(--detail-photo-main-width) var(--detail-photo-side-width);
    grid-template-rows: 286px var(--detail-photo-side-height);
    justify-content: space-between;
    gap: 23px;                                  /* 286 + 23 + 287 = 596, el alto de la principal */
}

.detalle__foto-principal {
    position: relative;
    grid-row: span 2;
    border-radius: var(--radius-card);
    overflow: hidden;
}

.detalle__foto { border-radius: var(--radius-card); overflow: hidden; }

.detalle__galeria img { width: 100%; height: 100%; object-fit: cover; }

.detalle__badge {
    position: absolute;
    left: 23px;                                 /* 143 - 120 */
    top: 28px;                                  /* 245 - 217 */
    display: grid;
    place-items: center;
    width: var(--detail-badge-width);
    height: var(--detail-badge-height);
    background: var(--color-accent);
    border-radius: var(--radius-badge);
    color: var(--color-text-on-accent);
    font-size: var(--font-size-badge);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-lg);
}

/* --- Cabecera: dirección + acciones ------------------------------------- */
.detalle__cabecera {
    margin-top: 34px;                           /* galería (813) → dirección (847) */
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.detalle__direccion {
    font-size: var(--font-size-detail-address);
    line-height: 24px;                          /* alto del nodo 19:749 (920×24) */
    letter-spacing: var(--letter-spacing-detail-address);
    color: var(--color-text-muted);
}

.detalle__acciones {
    display: flex;
    gap: 20px;
    margin-top: -14.4px;                        /* iconos en 832.6, dirección en 847 */
    margin-right: 4.1px;                        /* el corazón cierra en 1315.9, no en 1320 */
    color: var(--color-text-primary);
}
.detalle__acciones button { background: none; border: 0; padding: 0; cursor: pointer; }
.detalle__acciones .icon { width: 26px; height: 26px; }

.detalle__titulo {
    margin-top: 12px;                           /* dirección (871) → título (883) */
    font-size: var(--font-size-detail-title);
    font-weight: var(--font-weight-bold);
    /* El nodo 19:626 mide 790×81 en una línea: 81/54 = 1.5, el otro
       interlineado del archivo. No es el 1.03 de las cards. */
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-detail-title);
    color: var(--color-text-primary);
}

/* --- Cuerpo: descripción · resumen · caja de consulta ------------------- */
.detalle__subir {
    display: block;
    width: 12px;
    height: 7px;
    position: relative;
    top: 14px;                                  /* la tinta va en y=885, sin empujar el título */
    margin: 0 0 -7px 89px;                      /* x = 120 + 89 = 209 */
    padding: 0;
    background: none;
    border: 0;
    color: var(--color-text-primary);
    cursor: pointer;
}

.detalle__subir .icon { width: 12px; height: 7px; }

.detalle__cuerpo {
    margin-top: 13px;                           /* título (964) → cuerpo (977) */
    display: grid;
    /* Las tres columnas no están separadas por un gap parejo: descripción
       120..599, resumen 672..912 y consulta 937..1320. Cada columna de grilla
       incluye su propio aire a la derecha. */
    grid-template-columns: 552px 265px var(--detail-aside-width);
    align-items: start;
}

.detalle__descripcion { width: 479px; }

.detalle__descripcion h2 {
    font-size: var(--font-size-detail-body);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-detail-body);
    color: var(--color-text-primary);
}

.detalle__descripcion p {
    font-size: var(--font-size-detail-body);
    letter-spacing: var(--letter-spacing-detail-body);
    color: var(--color-text-muted);
}

.detalle__descripcion > * + h2 { margin-top: 45px; }   /* 1127 → 1172 */

.detalle__resumen {
    width: 240px;
    display: flex;
    flex-direction: column;
    text-align: right;
    color: var(--color-accent);
}

.detalle__resumen p {
    font-size: var(--font-size-detail-body);
    letter-spacing: var(--letter-spacing-detail-body);
}

.detalle__resumen p:first-child { font-weight: var(--font-weight-bold); }

/* Lleva el mismo peso de selector que las reglas de arriba: declarado sólo
   como .detalle__precio, "p:first-child" y "p + p" le ganan y el precio sale
   al tamaño del cuerpo. */
.detalle__resumen .detalle__precio {
    margin-top: 150px;                          /* "manzana propia" (1064) → precio (1227) */
    font-size: var(--font-size-detail-price);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-detail-price);
}

/* Caja de consulta — 383×384 con el formulario de 345 adentro */
.detalle__consulta {
    width: var(--detail-aside-width);
    min-height: 384px;
    margin-top: -94px;                          /* la caja arranca en 883, el cuerpo en 977 */
    padding: 17px 19px;                         /* 900-883 · 956-937 */
    background: var(--color-surface);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-card);
}

.detalle__consulta h2 {
    font-size: var(--font-size-meta);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-sm);
    color: var(--color-accent);
}

.detalle__consulta form {
    margin-top: 7px;                            /* 900+23 → 930 */
    display: flex;
    flex-direction: column;
    gap: var(--detail-field-gap);
}

.detalle__consulta input,
.detalle__consulta textarea {
    width: 100%;
    height: var(--detail-field-height);
    padding: 0 21px;
    background: var(--color-surface-field);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-field);
    font: inherit;
    font-size: var(--font-size-meta);
    letter-spacing: var(--letter-spacing-sm);
    color: var(--color-text-muted);
}

.detalle__consulta textarea {
    height: 110px;
    padding-top: 8px;
    resize: vertical;
}

.detalle__consulta .btn {
    align-self: flex-start;
    margin-top: 12px;                           /* 1974+110 = 2084 → 2094 */
    width: 116.87px;
    height: 42px;
    padding: 0;
}

/* --- Mapa --------------------------------------------------------------- */
.detalle__mapa {
    width: var(--detail-map-width);
    height: var(--detail-map-height);
    margin: 46px auto 0;                        /* ficha (1271) → mapa (1317) */
    border-radius: var(--radius-map);
    overflow: hidden;
}

.detalle__mapa img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Tasaciones — PDF del Figma, frame 1440×2500
   --------------------------------------------------------------------------
   Header 0..188 · hero 188..668 (480px) · sección blanca 668..2092 ·
   footer 2092..2500.
   ========================================================================== */
.tasaciones-hero {
    position: relative;
    height: 480px;
    display: flex;
    align-items: flex-start;
}

.tasaciones-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* La opacidad exacta de este velo NO se pudo leer del PDF: Figma la aplica al
   componer y no queda como figura. Se conserva el valor que ya tenía el sitio.
   Ver la nota de entrega. */
.tasaciones-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

/* Texto del hero — 24px/400, tracking -3%, interlineado 36px, color #E7E8E7.
   Arranca en x=118 y a 135.5px del borde superior del hero. */
.tasaciones-hero__text {
    position: relative;
    width: 100%;
    max-width: calc(500px + 118px);
    padding-left: 118px;
    padding-top: 135.5px;
    color: var(--color-text-on-accent);
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-regular);
    line-height: 36px;
    letter-spacing: var(--letter-spacing-card);
}

/* --- Acordeón ----------------------------------------------------------- */
.accordion-page {
    /* El bloque NO está centrado: va de x=124 a x=1324, o sea 4px a la derecha
       del centro del frame de 1440. */
    position: relative;
    left: 4px;
    width: 1200px;
    max-width: 100%;
    margin-inline: auto;
    padding-top: 107px;
    /* El Figma deja 587.5px de blanco entre el último panel y el footer.
       Se reproduce tal cual; ver la nota de entrega. */
    padding-bottom: 587.5px;
    display: flex;
    flex-direction: column;
    gap: 17.75px;
}

.accordion-page__item {
    background: var(--color-surface-field);
    border-radius: var(--radius-field);
}

.accordion-page__item summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* arriba 30.7 · izquierda 74.8 · derecha 44.6, todos del Figma */
    padding: 30.7px 44.6px 0 74.8px;
    min-height: 119.5px;
    list-style: none;
    cursor: pointer;
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: var(--letter-spacing-section);
    color: var(--color-text-muted);
}

.accordion-page__item summary::-webkit-details-marker { display: none; }

/* Chevron 30.1×19.5, color #9C9CA3, a 8.4px del tope del texto */
.accordion-page__item .chevron {
    flex: none;
    width: 30.1px;
    height: 19.5px;
    margin-top: 8.4px;
    color: var(--color-icon-muted);
    transition: transform .2s ease;
}

.accordion-page__item[open] .chevron { transform: rotate(180deg); }

/* El panel abierto mide 455px; el cerrado, 119.5px. */
.accordion-page__item[open] summary { min-height: 0; padding-bottom: 0; }

.accordion-page__content {
    /* 28.8 arriba deja la primera línea del cuerpo en y=882.5 y hace que el
       panel abierto cierre en los 455px del Figma. */
    padding: 28.8px 74.8px 33px 75px;
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-regular);
    line-height: 36px;
    letter-spacing: var(--letter-spacing-card);
    color: var(--color-text-muted);
}

/* La caja del cuerpo es más angosta que el panel: en el PDF la línea más
   larga mide 801.11px y los cortes se mantienen entre 795 y 860. */
.accordion-page__content p { max-width: 810px; }

/* Botón "Tasar mi propiedad" — 252×66, texto 20px Bold */
.accordion-page__content .btn {
    width: 252px;
    height: 66px;
    margin-top: 32.5px;
    padding: 0;
    font-size: var(--font-size-price);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-lg);
}

/* ==========================================================================
   Emprendimientos — PDF del Figma, frame 1440×1748
   Header 0..188 · título · grilla 3×2 de 384×327 · botón · footer 1338.
   ========================================================================== */
.emprendimientos {
    padding-top: 118.8px;
    padding-bottom: 103px;
}

.emprendimientos__inner {
    width: 1200px;
    max-width: 100%;
    margin-inline: auto;
}

/* Título — 54px Bold, tracking -3%, #4A4A4A */
.emprendimientos__title {
    /* El Figma da a la caja del título 57.6px de alto y la corre 2px a la
       derecha respecto de la grilla; el interlineado de 1.03 daría 55.62. */
    height: 57.6px;
    padding-left: 2px;
    margin-bottom: 24.6px;
    font-size: 54px;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: -1.62px;
    color: var(--color-text-primary);
}

.emprendimientos__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 23px;
}

.emprendimientos__item {
    aspect-ratio: 384 / 327;
    overflow: hidden;
}

.emprendimientos__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.emprendimientos__cta {
    display: flex;
    justify-content: center;
    padding-top: 103px;
}

/* "Ver más" acá es 252×66 con texto 20px Bold — distinto al del Home (182×66, 16px Regular) */
.emprendimientos__cta .btn {
    width: 252px;
    height: 66px;
    padding: 0;
    font-size: var(--font-size-price);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-lg);
}

/* ==========================================================================
   Responsive
   --------------------------------------------------------------------------
   El Figma define DOS frames: desktop 1440 y mobile 375. No hay tablet.
   - Entre 1024px y 1440px el layout desktop escala de forma fluida (el
     contenedor de 1209.128px se achica; el resto de los valores no cambia).
   - Por debajo de 1024px entra el diseño mobile del archivo (header de 97px
     con hamburguesa, buscador apilado en tres filas). Se eligió ese corte
     porque es donde la nav desktop deja de entrar: logo 171 + nav 461 +
     redes 114 + gutters = 1209px de ancho mínimo real.
   ========================================================================== */

@media (max-width: 1240px) {
    /* Cuando la pantalla es más angosta que el contenedor (1209.128px + aire),
       recién ahí aparecen los márgenes laterales. */
    .container,
    .site-header__inner,
    .hero__actions { padding-inline: 16px; }
}

@media (max-width: 1200px) {
    .site-footer__inner {
        grid-template-columns: 171px 255px 255px 369px;
        justify-content: space-between;
        width: 100%;
        padding-inline: 16px;
    }

    .site-footer__col--brand { grid-column: 1; }
    .site-footer__col--leloir { grid-column: 2; }
    .site-footer__col--castelar { grid-column: 3; }
    .site-footer__col--form { grid-column: 4; }
}

@media (max-width: 1023px) {
    /* --- Header mobile — 99:3979 (376×97) ------------------------------- */
    .site-header { height: var(--header-height-mobile); }

    /* El logo y la hamburguesa no comparten eje vertical en el Figma
       (logo y=32, hamburguesa y=44), así que cada uno se ancla desde arriba.
       Los márgenes laterales tampoco son simétricos: 15 a la izquierda,
       17 a la derecha (375 - 322 - 36). */
    .site-header__inner {
        align-items: flex-start;
        justify-content: space-between;
        padding: 0 17px 0 15px;
    }

    .site-header__logo { padding-top: 32px; }

    .site-header__logo img { width: 87px; height: 37px; }

    .site-nav,
    .site-social { display: none; }

    /* Hamburguesa — 99:3990 (36×16, stroke 2 blanco) */
    .site-header__burger {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 36px;
        height: auto;
        /* El padding superior posiciona el ícono en y=44 y de paso agranda
           el área táctil hasta 60px, por encima del mínimo de 44. */
        padding: 44px 0 0;
        border: 0;
        background: transparent;
        color: var(--color-text-on-dark);
        cursor: pointer;
    }

    .site-header__burger svg { width: 36px; height: 16px; }

    /* Nav desplegada por el botón */
    .site-nav.is-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: absolute;
        inset: var(--header-height-mobile) 0 auto 0;
        margin-left: 0;
        background: var(--color-header-overlay);
        backdrop-filter: blur(2px);
    }

    .site-nav.is-open .site-nav__link {
        width: 100%;
        height: auto;
        padding: 14px 15px;
        justify-content: flex-start;
        text-align: left;
    }

    /* --- Hero mobile — 94:26460 (404px) --------------------------------- */
    .hero { height: auto; }
    .hero__image { height: var(--hero-height-mobile); }

    /* Buscador apilado: 3 filas de 55px sobre fondo blanco — 94:26533 */
    .hero__search {
        position: static;
        transform: none;
        width: 100%;
    }

    .search-bar {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        padding: 0;
        border-radius: 0;
    }

    .search-bar__field {
        width: 100%;
        height: 55px;
        padding-inline: 66px;
        border-bottom: 1px solid var(--color-divider);
    }

    .search-bar__field--ubicacion { gap: 0; }

    /* El pin no existe en el frame mobile del Figma. */
    .search-bar__pin { display: none; }

    .search-bar__divider { display: none; }

    /* Buscar — 94:26499 (159×42, radio 9.287, Bold 16px) */
    .search-bar__submit {
        align-self: center;
        width: 159px;
        height: 42px;
        margin-top: 32px;
        padding: 12px 0;
        border-radius: var(--radius-pill);
        font-size: var(--font-size-button);
    }

    /* Pill "Buscar por código" — 94:26537: en mobile es GRIS, no roja */
    .hero__code {
        position: static;
        transform: none;
        width: 159px;
        height: auto;
        margin: 56px auto 0;
    }

    .hero__code--js.hero__code--abierto { width: 100%; }

    .hero__code-search {
        justify-content: center;
        background: var(--color-surface-pill-muted);
        font-size: var(--font-size-meta);
    }

    .hero__code-search:hover { background: var(--color-surface-pill-muted); }

    .hero__code-form {
        min-height: var(--hero-pill-height);
        background: var(--color-surface-pill-muted);
    }

    .hero__code-submit:hover { background: transparent; }

    /* Los accesos circulares no están en el frame mobile: se apoyan debajo. */
    .hero__actions {
        position: static;
        transform: none;
        justify-content: center;
        padding-top: 24px;
    }

    /* --- Destacados ------------------------------------------------------ */
    .featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* --- Footer ---------------------------------------------------------- */
    .site-footer { height: auto; }

    .site-footer__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
        padding-block: 40px;
    }

    .site-footer__col--brand,
    .site-footer__col--leloir,
    .site-footer__col--castelar,
    .site-footer__col--form {
        grid-column: auto;
        padding-top: 0;
    }

    .site-footer__col--form { grid-column: 1 / -1; }

    /* --- Tasaciones ------------------------------------------------------ */
    /* El frame mobile del archivo es el bloque desktop escalado al 32.5%
       (cuerpo de 7.79px, ilegible), así que acá se reacomodan los valores
       del desktop en vez de reproducirlo. Ver la nota de entrega. */
    .tasaciones-hero { height: auto; min-height: 320px; }

    .tasaciones-hero__text {
        max-width: 100%;
        padding: 96px 16px 40px;
        font-size: var(--font-size-field);
        line-height: 24px;
    }

    .accordion-page {
        left: 0;
        width: 100%;
        padding: 40px 16px 64px;
        gap: 16px;
    }

    .accordion-page__item summary {
        padding: 20px 16px;
        min-height: 0;
        font-size: var(--font-size-card-title);
    }

    .accordion-page__item .chevron { margin-top: 6px; }

    .accordion-page__content {
        padding: 0 16px 24px;
        font-size: var(--font-size-field);
        line-height: 24px;
    }

    .accordion-page__content p { max-width: 100%; }

    .accordion-page__content .btn {
        width: 100%;
        max-width: 252px;
        margin-top: 24px;
        font-size: var(--font-size-field);
    }

    /* --- Emprendimientos -------------------------------------------------- */
    .emprendimientos { padding-top: 40px; padding-bottom: 48px; }

    .emprendimientos__inner { width: 100%; padding-inline: 16px; }

    /* 28.37px es el tamaño que trae el frame mobile del archivo. */
    .emprendimientos__title {
        height: auto;
        padding-left: 0;
        margin-bottom: 20px;
        font-size: 28.37px;
        letter-spacing: -0.851px;
    }

    .emprendimientos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

    .emprendimientos__cta { padding-top: 40px; }
    .emprendimientos__cta .btn { width: 100%; max-width: 252px; font-size: var(--font-size-field); }

    /* --- Listado mobile — 94:26538 (375×812) ----------------------------- */
    /* No es el desktop reflowado: es un diseño propio. La foto ocupa toda la
       card y el texto va encima; los metadatos desaparecen y aparecen
       favorito, flechas y WhatsApp. */
    .listado { padding-top: 18px; }             /* header (97) → conteo (115) */

    .listado__barra { display: none; }

    .listado__resumen {
        display: block;
        padding-inline: 17px;
    }

    .listado__conteo {
        font-size: var(--font-size-meta);
        letter-spacing: var(--letter-spacing-sm);
        color: var(--color-text-primary);
    }

    .listado__titulo {
        font-size: 20px;
        line-height: 23px;                       /* alto del nodo 99:3415 (273×23) */
        font-weight: var(--font-weight-regular);
        letter-spacing: var(--letter-spacing-control);
        color: var(--color-text-primary);
    }

    .listado__titulo span { color: var(--color-accent); }

    .listado__orden-mobile {
        display: flex;
        align-items: center;
        gap: 9px;                                /* "Ordenar por:" (…97) → valor (106) */
        margin-top: 7px;                         /* título (156) → orden (163) */
        font-size: var(--font-size-meta);
        letter-spacing: var(--letter-spacing-sm);
    }

    .listado__orden-mobile select {
        appearance: none;
        background: none;
        border: 0;
        padding: 0;
        font: inherit;
        color: var(--color-accent);
        cursor: pointer;
    }

    .listado__cuerpo {
        left: 0;
        width: 100%;
        padding: 18px 16px 0 17px;               /* orden (181) → card (199); la card va de 17 a 359 */
        grid-template-columns: 1fr;
    }

    .listado__resultados {
        height: auto;
        padding-right: 0;
        overflow: visible;
        gap: 11px;                               /* paso 269 - foto 258 */
    }

    .listado__mapa { display: none; }

    /* El panel de filtros pasa a cajón a pantalla completa. */
    .panel-filtros {
        position: fixed;
        inset: 0;
        left: 0;
        width: 100%;
        max-height: none;
        padding: 0 17px 40px;
        border: 0;
        border-radius: 0;
    }

    /* El archivo no dibuja el panel en mobile: acá el chevron va contra el
       borde, no a los 57px que tiene en el desktop. */
    .panel-filtros__chevron { margin-right: 0; }

    /* Pill flotante — 252×37 en (13, 711), radio pill */
    .listado__pill {
        position: fixed;
        left: 13px;
        bottom: 64px;                            /* 812 - 711 - 37 */
        z-index: 20;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 252px;
        height: 37px;
        padding: 0 12px;
        background: var(--color-accent);
        border: 0;
        border-radius: var(--radius-pill);
        color: var(--color-text-on-dark);
        font-size: var(--font-size-meta);
        letter-spacing: var(--letter-spacing-sm);
        cursor: pointer;
    }

    .listado__pill .icon { width: 23.36px; height: 14.09px; color: currentColor; }

    /* --- Card mobile — 342×258, texto sobre la foto ---------------------- */
    .tarjeta {
        width: 100%;
        height: 257.94px;
        flex: 0 0 257.94px;
        display: block;
        background: none;
        border-radius: var(--radius-card);
        box-shadow: none;
        overflow: hidden;
    }

    .tarjeta__foto {
        position: absolute;
        inset: 0;
        border-radius: var(--radius-card);
    }

    /* Velo para que el texto blanco se lea sobre cualquier foto. El Figma no
       lo define: la foto del mock es oscura justo donde va el texto. */
    .tarjeta__foto::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 32%,
            rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.45) 100%);
    }

    .tarjeta__badge {
        left: 14.93px;
        top: 54px;
        width: 71.07px;
        height: 26.85px;
        font-size: 15px;
        letter-spacing: -0.45px;                 /* -3% de 15 */
    }

    .tarjeta__cuerpo {
        position: absolute;
        inset: 0;
        padding: 9.47px 16.5px 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: var(--color-text-on-dark);
    }

    .tarjeta__direccion {
        max-width: 215px;
        font-size: var(--font-size-meta);
        letter-spacing: var(--letter-spacing-sm);
        color: inherit;
    }

    .tarjeta__titulo {
        margin-top: 0;
        max-width: 225px;                        /* fuerza el corte tras "Departamento" (97:3389) */
        font-size: 27px;                         /* medido; ver figma-listado-detalle.md */
        line-height: 29px;
        letter-spacing: -0.81px;                 /* -3% de 27 */
        color: inherit;
    }

    .tarjeta__datos { display: none; }

    .tarjeta__precio {
        margin-top: 4px;
        font-size: 25px;
        font-weight: var(--font-weight-regular);
        letter-spacing: -0.75px;                 /* -3% de 25 */
        color: inherit;
    }

    /* Círculo de favorito, flechas y WhatsApp — sólo en la card mobile */
    .tarjeta__fav,
    .tarjeta__wsp {
        position: absolute;
        right: 11.13px;                          /* 359 - 316.55 - 31.32 */
        display: grid;
        place-items: center;
        width: 31.32px;
        height: 31.32px;
        border: 0;
        border-radius: 50%;
        cursor: pointer;
    }

    .tarjeta__fav {
        top: 52px;
        background: var(--color-surface);
        color: var(--color-accent);
    }

    .tarjeta__fav .icon { width: 17px; height: 16px; }

    .tarjeta__wsp {
        top: 212.07px;
        background: var(--color-accent);
        color: var(--color-text-on-dark);
    }

    .tarjeta__wsp .icon { width: 19px; height: 19px; }

    /* Más grandes que en el Figma (21.93px): con el dedo no se acertaba.
       El centro queda donde estaba (114.4px desde arriba, a 26.9px del borde). */
    .tarjeta__prev,
    .tarjeta__next {
        position: absolute;
        top: 92.4px;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(0, 0, 0, .35);
        border: 0;
        padding: 0;
        cursor: pointer;
        color: var(--color-text-on-dark);
    }

    .tarjeta__prev { left: 4.9px; }
    .tarjeta__next { right: 4.9px; }

    .tarjeta__fav,
    .tarjeta__prev,
    .tarjeta__next,
    .tarjeta__wsp { display: grid; }

    /* --- Detalle mobile — 99:3512 (375×1755) ----------------------------- */
    .detalle { padding-top: 26px; }              /* header (97) → pill (123) */

    .detalle__contenido { width: 100%; }

    /* Barra de contexto: pill de filtros + alternador grilla/mapa */
    .detalle__contexto {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
    }

    .detalle__volver {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        width: 163px;                            /* nodo 99:3993 (163×24) */
        height: 24px;
        padding: 0 8px;
        background: var(--color-accent);
        border-radius: var(--radius-pill);
        color: var(--color-text-on-dark);
        font-size: var(--font-size-meta);
        letter-spacing: var(--letter-spacing-sm);
    }

    .detalle__volver .icon { width: 15.2px; height: 9.15px; }

    .detalle__vistas { display: inline-flex; gap: 6.3px; }

    .detalle__vista {
        display: grid;
        place-items: center;
        width: 21.35px;
        height: 21.35px;
        border-radius: 50%;
    }

    .detalle__vista--grilla { background: var(--color-accent); color: var(--color-text-on-dark); }
    .detalle__vista--grilla .icon { width: 10px; height: 10px; }

    .detalle__vista--mapa { background: var(--color-surface-card); color: var(--color-text-primary); }
    .detalle__vista--mapa .icon { width: 11px; height: 12px; }

    .detalle__galeria {
        margin-top: 13px;                        /* pill (147) → foto (160) */
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 0;
    }

    .detalle__foto-principal {
        grid-row: auto;
        height: 284px;
        border-radius: 0;
    }

    .detalle__foto { display: none; }

    .detalle__badge {
        left: 18px;
        top: 30px;                               /* 190 - 160 */
        width: 104.4px;
        height: 39.44px;
    }

    .detalle__fav,
    .detalle__prev,
    .detalle__next { display: grid; }

    .detalle__fav {
        position: absolute;
        right: 17.56px;                          /* 375 - 323 - 34.44 */
        top: 30px;
        place-items: center;
        width: 34.44px;
        height: 34.44px;
        background: var(--color-surface);
        border: 0;
        border-radius: 50%;
        color: var(--color-accent);
        cursor: pointer;
    }

    .detalle__fav .icon { width: 18px; height: 17px; }

    /* Más grandes que en el Figma (6×12px sin fondo): con el dedo no se
       acertaba. Centradas en la altura de la foto, como en desktop. */
    .detalle__prev,
    .detalle__next {
        position: absolute;
        top: 50%;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        margin-top: -22px;
        border-radius: 50%;
        background: rgba(0, 0, 0, .35);
        border: 0;
        padding: 0;
        color: var(--color-text-on-dark);
        cursor: pointer;
    }

    .detalle__prev { left: 8px; }
    .detalle__next { right: 8px; }
    .detalle__prev .icon,
    .detalle__next .icon { width: 8px; height: 14px; }

    .detalle__cabecera {
        margin-top: 13px;                        /* foto (444) → dirección (457) */
        padding-inline: 16.5px;
    }

    /* En mobile toda la ficha baja de tamaño. Los valores salen de resolver el
       ancho de tinta del frame 99:3512 contra Poppins, con tracking -3%:
       dirección 12, título 32, precio 24, resumen 14 y cuerpo 14. */
    .detalle__direccion {
        font-size: var(--font-size-meta);
        line-height: 18px;                       /* líneas de tinta en 463 y 481 */
        letter-spacing: var(--letter-spacing-sm);
    }

    .detalle__acciones { display: none; }

    /* Los nodos de texto del frame mobile traen interlineado de sobra arriba,
       así que estos márgenes alinean la TINTA (508, 583, 612, 651…), no la
       caja del nodo. */
    .detalle__titulo {
        margin-top: 4.4px;                       /* tinta del título en 508 */
        padding-inline: 14.5px;
        font-size: 32px;
        line-height: 35px;                       /* líneas de tinta en 508 y 543 */
        letter-spacing: -0.96px;
    }

    .detalle__cuerpo {
        margin-top: 2.4px;                       /* tinta del precio en 583 */
        padding-inline: 16px;
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* En mobile las columnas tienen su propio ancho, más angosto que el de la
       pantalla: la descripción corta a 251 (129:4408) y el resumen a 264
       (99:3659). Sin esto el texto arma otras líneas que las del archivo. */
    .detalle__descripcion { width: 251px; }
    .detalle__resumen { width: 264px; }

    /* En mobile el orden es precio → superficie → descripción → consulta */
    .detalle__resumen { order: 1; text-align: left; }
    .detalle__descripcion { order: 2; margin-top: 7.5px; } /* tinta de "Planta Única" en 651 */
    .detalle__consulta { order: 3; }

    /* En mobile el precio sube arriba del resumen: precio → superficie → torres
       (99:3559 en 552, 99:3659 en 611). No se invierte el bloque entero. */
    .detalle__resumen { flex-direction: column; }
    .detalle__resumen .detalle__precio { order: -1; }

    .detalle__resumen .detalle__precio {
        margin-top: 0;
        margin-bottom: 0.5px;                    /* tinta de "Sup. cubierta" en 612 */
        font-size: 24px;
        /* Se declara explícito: si no, gana el line-height 14 de la regla de
           abajo (".detalle__resumen p" también matchea el precio) y el precio
           se monta sobre el título. */
        line-height: 36px;
        letter-spacing: -0.72px;
    }

    /* Las dos líneas del resumen van muy juntas: 612 y 626 de tinta. */
    .detalle__resumen p { line-height: 14px; }

    .detalle__resumen p,
    .detalle__descripcion h2,
    .detalle__descripcion p {
        font-size: 14px;
        letter-spacing: -0.42px;
    }

    .detalle__descripcion p { line-height: 21px; }   /* líneas de tinta cada 21 */

    .detalle__descripcion > * + h2 { margin-top: 7px; }  /* tinta de "Planta Amenities" en 805 */

    .detalle__consulta {
        width: 100%;
        min-height: 341px;
        margin-top: 32px;                        /* Amenities (885) → caja (902) */
        padding: 21px 15px;
    }

    .detalle__consulta .btn { width: 103.78px; height: 37.3px; }

    .detalle__mapa {
        width: auto;
        height: 267px;
        margin: 29px 18px 0 17px;                /* caja (1243) → mapa (1272); mapa 17..357 */
    }
}

@media (max-width: 640px) {
    .featured__grid { grid-template-columns: 1fr; }
    .emprendimientos__grid { grid-template-columns: 1fr; }
    /* min-height y no height: la regla base ya deja crecer la card, acá sólo se
       suelta el alto del Figma, que en una columna sobra. */
    .property-card { min-height: 0; padding-bottom: 24px; }

    /* Los cuatro datos de a dos por renglón: en una columna angosta la fila
       corrida se lee como un bloque de texto. */
    .property-card__specs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .site-footer__inner { grid-template-columns: 1fr; }
    .contact-form__row { grid-template-columns: 1fr; }
}