/**
 * LC_MODERN_V1 — capa de efectos modernos EN ORO (paleta de la casa #E2C48E)
 *
 * ⚠️ DECISIÓN DEL DUEÑO (2026-07-09): el acento se queda EN ORO. El coral del
 * «variante B» quedó DESCARTADO en la práctica — B aporta los EFECTOS
 * (spotlight, tilt, glow, cristal, imán), no el color. No volver al coral.
 *
 * Componentes (solo efectos, sin tocar estructura ni la paleta base):
 *   1. Tarjetas del feed → spotlight dorado que sigue al cursor + tilt 3D (JS)
 *   2. Botones CTA (.lc-search-submit, .lc-load-more-btn, .lc-btn-cta)
 *      → gradiente dorado + glow + imán (JS)
 *   3. Buscador (.lc-search-bar-modern) → panel de cristal + aro dorado al enfocar
 *
 * Se carga DESPUÉS de property-feed.css y search-bar.css (capa de overrides).
 * Rollback = dejar de encolar este archivo + lc-modern.js.
 * Los efectos de cursor solo actúan en escritorio (hover + pointer fine);
 * el MÓVIL conserva estructura y aspecto intactos.
 */

/* ════════════════════════════════════════════════
   1 · TARJETAS DEL FEED — spotlight dorado + glow
   (colores base de la tarjeta: los originales de
   property-feed.css, aquí NO se re-pintan)
   ════════════════════════════════════════════════ */

.lc-property-card {
    --lc-mx: 50%;
    --lc-my: 50%;
    position: relative;
    /* transform corto para que el tilt del JS responda al instante */
    transition: transform 0.15s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    will-change: transform;
}

.lc-property-card:hover {
    border-color: #E2C48E;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(226, 196, 142, 0.38),
        0 0 26px rgba(226, 196, 142, 0.14);
}

/* Spotlight: mancha dorada que sigue al cursor (solo escritorio con ratón).
   El tilt 3D lo aplica lc-modern.js vía style.transform. */
@media (hover: hover) and (pointer: fine) {
    .lc-property-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        background: radial-gradient(
            300px circle at var(--lc-mx) var(--lc-my),
            rgba(226, 196, 142, 0.18),
            transparent 55%
        );
        z-index: 2;
    }

    .lc-property-card:hover::after {
        opacity: 1;
    }
}

/* ════════════════════════════════════════════════
   2 · BOTONES CTA — gradiente dorado + glow
   (texto oscuro como siempre; el imán lo añade lc-modern.js)
   ════════════════════════════════════════════════ */

.lc-search-submit,
.lc-load-more-btn,
.lc-btn-cta {
    background: linear-gradient(120deg, #EED2A0, #D9AF66);
    color: #1a1f24;
    border: none;
    box-shadow: 0 8px 24px rgba(226, 196, 142, 0.35);
    will-change: transform;
}

.lc-search-submit:hover,
.lc-load-more-btn:hover,
.lc-btn-cta:hover {
    background: linear-gradient(120deg, #F5DCAE, #E2BC74);
    color: #1a1f24;
    box-shadow: 0 12px 32px rgba(226, 196, 142, 0.5);
}

.lc-search-submit:active,
.lc-load-more-btn:active,
.lc-btn-cta:active {
    transform: scale(0.97);
}

.lc-search-submit:focus-visible,
.lc-load-more-btn:focus-visible,
.lc-btn-cta:focus-visible {
    outline: 2px solid #E2C48E;
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════
   3 · BUSCADOR — panel de cristal + aro dorado al enfocar
   (labels, calendario, desplegables: se quedan con su
   oro original de search-bar.css)
   ════════════════════════════════════════════════ */

.lc-search-bar-modern {
    background: linear-gradient(135deg, rgba(22, 26, 32, 0.94), rgba(34, 40, 48, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.lc-search-field {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.lc-search-field:hover {
    border-color: rgba(226, 196, 142, 0.4);
}

.lc-search-field:focus-within {
    border-color: rgba(226, 196, 142, 0.75);
    box-shadow: 0 0 0 3px rgba(226, 196, 142, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

/* Conmutador Todos / Casas / Hoteles: activo con gradiente dorado */
.lc-search-type-btn.active {
    background: linear-gradient(120deg, #EED2A0, #D9AF66);
    color: #1a1f24;
    box-shadow: 0 6px 16px rgba(226, 196, 142, 0.35);
}

/* ════════════════════════════════════════════════
   Accesibilidad: sin movimiento si el usuario lo pide
   ════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .lc-property-card,
    .lc-property-card::after,
    .lc-search-submit,
    .lc-load-more-btn,
    .lc-btn-cta,
    .lc-search-field {
        transition: none !important;
    }
}