/* ═══════════════════════════════════════════════════════════════════
   REALTY — Ficha única  ·  Fase 17 Bloque A · 2026-08-10

   Una sola ficha para todo el módulo, en lugar de los cuatro markups que
   hacían lo mismo. La foto manda: es lo que la gente mira antes de leer nada.

   Color: un solo sólido (--rc-acento) y neutros. Ningún peso sobre 600.
   Movimiento: una sola curva y duración en todo el módulo.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --rc-acento: var(--rl-s);
    --rc-cian:   var(--rl-s-luz);
    --rc-tinta:  var(--rl-p);
    --rc-texto:  #475569;
    --rc-suave:  #64748b;
    --rc-tenue:  #94a3b8;
    --rc-linea:  #e8e8ec;
    --rc-gris:   #f1f5f9;
    --rc-curva:  cubic-bezier(.2, .8, .2, 1);
    --rc-t:      .22s;
}

.rc {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--rc-linea);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--rc-t) var(--rc-curva),
                box-shadow var(--rc-t) var(--rc-curva),
                border-color var(--rc-t) var(--rc-curva);
}
.rc:hover {
    transform: translateY(-4px);
    border-color: #d9d4f2;
    box-shadow: 0 16px 32px -14px rgba(17, 18, 20, .22);
}
.rc:focus-visible { outline: 2px solid var(--rc-acento); outline-offset: 3px; }

/* Una propiedad ya tomada no debe gritar igual que una disponible */
.rc--tomada .rc__media { opacity: .82; }
.rc--tomada:hover .rc__media { opacity: 1; }

/* ── Media: la foto es la protagonista ──────────────────────────── */
.rc__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--rc-gris);
    overflow: hidden;
}
.rc__track {
    display: flex;
    height: 100%;
    transition: transform .45s var(--rc-curva);
}
.rc__img {
    flex: 0 0 100%;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    /* El zoom lento al pasar el cursor es lo que hace que la ficha "respire" */
    transition: transform 1.2s var(--rc-curva);
}
.rc:hover .rc__img { transform: scale(1.04); }

.rc__vacio {
    height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 7px;
    color: var(--rc-tenue);
}
.rc__vacio i    { font-size: 1.6rem; }
.rc__vacio span { font-size: .74rem; letter-spacing: .4px; }

.rc__dots {
    position: absolute; bottom: 10px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 5px;
    opacity: 0;
    transition: opacity var(--rc-t) var(--rc-curva);
}
.rc__media:hover .rc__dots { opacity: 1; }
.rc__dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    transition: background var(--rc-t) var(--rc-curva),
                width var(--rc-t) var(--rc-curva);
}
.rc__dots span.is-on { background: #fff; width: 14px; border-radius: 3px; }

.rc__trans {
    position: absolute; top: 10px; left: 10px;
    padding: 3px 10px; border-radius: 20px;
    /* Fase 20 — de .68rem (10.9px) a .75rem (12px). Medido el 9-sep-2026: las dos
       etiquetas de la ficha caían bajo los 12px, que es el piso legible para
       texto en mayúsculas con letter-spacing. */
    font-size: .75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px;
}
.rc__trans--venta { background: var(--rc-acento); color: #fff; }
.rc__trans--renta { background: var(--rc-cian);   color: var(--rc-tinta); }

/* ── Cuerpo ─────────────────────────────────────────────────────── */
.rc__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 5px; }

.rc__meta {
    margin: 0;
    font-size: .78rem; font-weight: 600;   /* Fase 20 — era .7rem (11.2px) */
    letter-spacing: .6px; text-transform: uppercase;
    color: var(--rc-acento);
    display: flex; align-items: center; gap: 8px;
}
/* Estado como punto sólido + palabra, nunca una caja pastel */
.rc__estado { display: inline-flex; align-items: center; gap: 5px; }
.rc__estado::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}

.rc__title {
    margin: 0;
    font-size: .98rem; font-weight: 600; line-height: 1.32;
    color: var(--rc-tinta);
    /* Dos líneas como máximo: si no, las fichas de una fila quedan disparejas */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

.rc__ubic {
    margin: 0;
    font-size: .8rem; color: var(--rc-suave);
    display: flex; align-items: center; gap: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc__ubic i { color: var(--rc-tenue); font-size: .78rem; flex-shrink: 0; }

.rc__specs {
    display: flex; flex-wrap: wrap; gap: 4px 14px;
    margin-top: 2px;
    font-size: .8rem; color: var(--rc-texto);
}
.rc__specs span { display: inline-flex; align-items: center; gap: 5px; }
.rc__specs i    { color: var(--rc-tenue); font-size: .78rem; }

.rc__precio {
    margin: 6px 0 0;
    font-size: 1.05rem; font-weight: 600; color: var(--rc-tinta);
}
.rc__precio small { font-size: .78rem; font-weight: 400; color: var(--rc-suave); }
.rc__precio-antes {
    font-size: .8rem; font-weight: 400; color: var(--rc-tenue);
    text-decoration: line-through; margin-right: 7px;
}
.rc__precio--consultar { font-size: .92rem; font-weight: 400; color: var(--rc-suave); }

/* ── Rejilla ────────────────────────────────────────────────────── */
.rc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}
@media (max-width: 520px) {
    .rc-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
    .rc__body { padding: 11px 12px 13px; }
    .rc__title { font-size: .9rem; }
}

/* ── Entrada al scroll: la página se arma, no aparece de golpe ──── */
.rc[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s var(--rc-curva), transform .5s var(--rc-curva);
}
.rc[data-reveal].is-in { opacity: 1; transform: none; }
/* Sin JS todo queda visible: la animación es un plus, no un requisito */
.no-js .rc[data-reveal],
.rc[data-reveal].is-in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .rc, .rc__track, .rc__img, .rc__dots span, .rc[data-reveal] { transition: none; }
    .rc:hover { transform: none; }
    .rc:hover .rc__img { transform: none; }
    .rc[data-reveal] { opacity: 1; transform: none; }
}