/* ══════════════════════════════════════════════════════════════════════
   Home moderno — refinamientos sobre Home.razor.css.

   Versión limpia: este archivo solía tener aurora gradients, mouse-glow,
   shine sweeps, gradient text fill teal→violet, backdrop-filter de 30px y
   pulse animations — todos efectos decorativos que daban un look
   "AI-template" en vez de un marketplace inmobiliario serio.

   Política nueva:
   - Cero blobs/aurora/noise overlays.
   - Cero gradient text fills decorativos. El brand es teal sólido (no
     teal+violet). Si hace falta jerarquía, va por peso/tamaño/serif, no
     color decorativo.
   - Backdrop-filter sólo donde aporta legibilidad (chips sobre imagen),
     no en cards estructurales.
   - Stagger reveal mantenido pero atenuado (16px, no 48px).
   - prefers-reduced-motion respetado.

   No se redefinen tokens locales: todo consume var(--color-*) de
   tokens.css. Esto matará la confusión teal #0d9488 vs #5eead4 que existía
   antes.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero: contención del z-index ──────────────────────────────────── */
.hero-fullscreen { isolation: isolate; }

/* ── Text-reveal del título del hero ───────────────────────────────── */
/* Tokenizamos el h1 en spans .hm-word para animarlos uno por uno. La
   animación es discreta (300ms, 0.4em translate) — entrada elegante, no
   "movie title". */
.hero-title {
    overflow: visible;
}

.hm-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.4em);
    animation: hmWordReveal 700ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
    margin-right: 0.22em;
    will-change: opacity, transform;
}
.hm-word:nth-child(1) { animation-delay: 200ms; }
.hm-word:nth-child(2) { animation-delay: 280ms; }
.hm-word:nth-child(3) { animation-delay: 360ms; }
.hm-word:nth-child(4) { animation-delay: 440ms; }
.hm-word:nth-child(5) { animation-delay: 520ms; }

/* La palabra acentuada antes era un linear-gradient text-fill teal→violet —
   el "AI tell" más obvio. Ahora es color brand sólido + peso. La jerarquía
   se logra con el peso, no con un degradé decorativo. */
.hm-word--accent {
    color: var(--color-brand);
    font-weight: 800;
}

@keyframes hmWordReveal {
    to { opacity: 1; transform: translateY(0); }
}

/* El subtítulo y search-bar también aparecen con stagger atenuado */
.hero-subtitle,
.search-bar,
.hero-stats {
    opacity: 0;
    animation: hmFadeUp 700ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
}
.hero-subtitle { animation-delay: 700ms; }
.search-bar    { animation-delay: 820ms; }
.hero-stats    { animation-delay: 960ms; }

@keyframes hmFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Counters en hero-stats — tabular nums para que no salten entre dígitos */
.hero-stats [data-count-to] {
    font-variant-numeric: tabular-nums;
    display: inline-block;
}

/* ── Property cards (featured section): hover sobrio ───────────────── */
/* La card sigue teniendo su transition propia. Acá sólo definimos la
   sombra de hover para que sea más cálida (tinte teal sutil). */
.prop-card {
    transition:
        transform var(--duration-slow, 300ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--duration-slow, 300ms) ease,
        border-color var(--duration-slow, 300ms) ease;
}
.prop-card:hover {
    box-shadow:
        0 16px 32px -12px rgba(13, 148, 136, 0.18),
        0 8px 16px -8px rgba(15, 23, 42, 0.10);
}

/* ── Popular cards (búsquedas populares) ──────────────────────────── */
/* Border radius unificado + transición para hover de imagen y overlay.
   No tilt 3D, no glow radial, no shine sweep — sólo zoom suave de imagen
   y refuerzo del overlay (UX estándar para tarjetas con foto). */
.popular-card {
    border-radius: var(--radius-lg, 16px) !important;
    overflow: hidden;
    transition:
        transform var(--duration-slow, 300ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        box-shadow var(--duration-slow, 300ms) ease;
    position: relative;
}

.popular-card .popular-overlay {
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 0, 0, 0.15) 40%,
        rgba(0, 0, 0, 0.65) 100%
    ) !important;
    transition: background 320ms ease !important;
}

/* Hover: el overlay vira a teal — esto SÍ es comunicativo (indica que
   es clickeable y refuerza el brand). Mantenido pero atenuado. */
.popular-card:hover .popular-overlay {
    background: linear-gradient(
        to top,
        rgba(13, 148, 136, 0.85) 0%,
        rgba(15, 23, 42, 0.65) 55%,
        rgba(15, 23, 42, 0.20) 100%
    ) !important;
}

.popular-card img {
    transition: transform 700ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) !important;
}
.popular-card:hover img {
    transform: scale(1.05) !important;
}

/* ── Stats bar: micro-feedback en hover ────────────────────────────── */
.stats-bar {
    transition: box-shadow 400ms ease;
}

.stat-number {
    position: relative;
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

.stat-item {
    position: relative;
    transition: transform var(--duration-slow, 300ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.stat-item:hover { transform: translateY(-3px); }

/* Underline al hover — antes era gradient teal→violet (incoherente con
   el brand), ahora es color brand sólido. */
.stat-item::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-brand);
    transition: width 320ms ease, left 320ms ease;
    border-radius: 2px;
}
.stat-item:hover::after {
    width: 36px;
    left: calc(50% - 18px);
}

/* ── Scroll-reveal: stagger más sobrio ─────────────────────────────── */
/* Antes: translateY(48px) — los elementos "caían" dramáticamente al
   scroll. Ahora: 16px — entran con elegancia, no con cinematic punch. */
[data-reveal] { transform: translateY(16px); }
[data-reveal="left"]  { transform: translateX(-20px); }
[data-reveal="right"] { transform: translateX(20px); }
[data-reveal="zoom"]  { transform: scale(0.96); }

/* ── Eyebrow badge arriba del título (sobre el hero) ──────────────── */
/* Sin pulse, sin glow neon, sin backdrop-filter de 20px. Chip simple
   pill con borde sutil, legible sobre la imagen del hero. */
.hm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 12px;
    border-radius: var(--radius-pill, 999px);
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: white;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 24px;
    opacity: 0;
    animation: hmFadeUp 600ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) 100ms forwards;
}

.hm-eyebrow strong {
    color: var(--color-brand-light, #5eead4);
    font-weight: 800;
    letter-spacing: 0.06em;
}

/* Dot informativo sin pulse — antes tenía box-shadow neon + pulse de
   2s. Ahora es estático: indica "online/active" pero sin gimmick. */
.hm-eyebrow__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-brand-light, #5eead4);
}

.hm-eyebrow__sep {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.25);
}

/* ── Trust chip flotante (debajo del search) ──────────────────────── */
/* Backdrop-filter reducido a 12px (era 30px). Mantenemos el chip porque
   sirve para reforzar confianza ("buscado por X usuarios" o similar). */
.hm-trust {
    position: absolute;
    left: 50%;
    bottom: 32px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 10px;
    border-radius: var(--radius-pill, 999px);
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: white;
    font-size: 12.5px;
    font-weight: 500;
    z-index: 5;
    opacity: 0;
    transform: translate(-50%, 14px);
    animation: hmTrustIn 700ms var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) 1100ms forwards;
    white-space: nowrap;
}

@keyframes hmTrustIn {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.hm-trust__ico {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand);
    color: white;
}

.hm-trust kbd {
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 5px;
    color: white;
    margin-left: 4px;
}

@media (max-width: 720px) {
    .hm-trust { display: none; }
}

/* Mobile: eyebrow más compacto. Antes el texto largo "La plataforma inmobiliaria
   de Uruguay" hacía que el pill se viera apretado y el text wrap rompía el ritmo.
   En mobile lo recortamos visualmente: dejamos sólo "NUEVO" + texto corto. */
@media (max-width: 640px) {
    .hm-eyebrow {
        font-size: 11px;
        padding: 5px 12px 5px 10px;
        gap: 8px;
        margin-bottom: 16px;
        max-width: 92vw;
        /* Le permitimos wrappear si el dispositivo es extra chico, pero centrado. */
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        line-height: 1.4;
    }
    .hm-eyebrow__sep { display: none; }
    .hm-eyebrow strong {
        /* Bullet visual antes del NUEVO ya está, así que sacamos el separador y
           el texto largo queda fluido en una segunda línea cuando hace falta. */
        margin-right: 2px;
    }
}

/* ── Títulos de sección con tipografía moderna ─────────────────────── */
/* Sora con tracking apretado para los titulares de sección — esto sigue
   siendo OK, le da personalidad al producto. */
.diff-section .diff-title,
.featured-section .section-title,
.popular-section .section-title {
    font-family: 'Sora', 'Inter', sans-serif !important;
    letter-spacing: -0.025em !important;
}

/* ── Respeto motion-reducido ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hm-word,
    .hm-eyebrow,
    .hm-trust,
    .hero-subtitle,
    .search-bar,
    .hero-stats { animation: none !important; }
    .hm-word,
    .hero-subtitle,
    .search-bar,
    .hero-stats,
    .hm-eyebrow {
        opacity: 1 !important;
        transform: none !important;
    }
    /* El trust chip mantiene el translate -50% para seguir centrado */
    .hm-trust { opacity: 1 !important; transform: translate(-50%, 0) !important; }
    .popular-card,
    .prop-card,
    .stat-item { transition: none !important; }
}