/* ==========================================================
   HC Inmobiliaria - HOME
   Hero, buscador (también se usa en /propiedades), secciones
   de la portada y mapa de la home.
   ========================================================== */

/* ===================== HERO ===================== */
/* Foto real de la última propiedad publicada (suele ser de celular),
   a sangre completa, con un velo oscuro cálido que asegura la lectura. */
.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(560px, 78vh, 720px);
    /* Abajo queda lugar para el buscador que flota sobre el borde */
    padding: var(--space-8) 0 calc(var(--space-9) + var(--space-5));
    background-color: var(--color-footer);
    color: var(--color-white);
    overflow: hidden;
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(0deg, rgba(20, 18, 16, 0.6) 0%, rgba(20, 18, 16, 0) 45%),
        linear-gradient(90deg, rgba(20, 18, 16, 0.86) 0%, rgba(20, 18, 16, 0.66) 45%, rgba(20, 18, 16, 0.3) 100%);
}
.hero__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-7);
    align-items: center;
    width: 100%;
}
.hero__content { max-width: 660px; }

/* Sobretítulo con una línea de acento */
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}
.hero__eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-primary);
}
.hero__content h1 {
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
    text-wrap: balance;
    margin-bottom: var(--space-5);
}
.hero__lead {
    max-width: 540px;
    margin-bottom: var(--space-6);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, 0.88);
}
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Cantidades reales del catálogo (vienen de la API) */
.hero__stats {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.hero__stats li {
    padding-right: var(--space-6);
    margin-right: var(--space-6);
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: rgba(255, 255, 255, 0.78);
}
.hero__stats li:last-child { padding-right: 0; margin-right: 0; border-right: 0; }
.hero__stats strong {
    display: block;
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-white);
}

/* Tarjetita "En la foto": identifica la propiedad del fondo */
.hero__featured {
    align-self: end;
    justify-self: end;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 300px;
    padding: var(--space-5);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.hero__featured:hover { transform: translateY(-4px); }
.hero__featured:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-lg); }
.hero__featured-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-primary-600);
}
.hero__featured-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--color-ink);
}
.hero__featured-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}
.hero__featured-location i { color: var(--color-primary); }
.hero__featured-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-line);
}
.hero__featured-price {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-primary-600);
}
.hero__featured-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-ink);
    white-space: nowrap;
}
.hero__featured-link i { transition: transform var(--dur-fast) var(--ease-out); }
.hero__featured:hover .hero__featured-link i { transform: translateX(3px); }

/* ===================== SEARCH BAR (home + /propiedades) ===================== */
/* Panel base: funciona solo con la clase .search-bar (así lo usa /propiedades).
   El modificador --hero lo hace flotar sobre el borde inferior del hero. */
.search-bar {
    position: relative;
    z-index: 5;
    max-width: var(--container-max);
    margin: 0 auto var(--space-6);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.search-bar--hero {
    margin-top: calc(-1 * var(--space-8));
    margin-bottom: 0;
    box-shadow: var(--shadow-lg);
}
.search-bar form {
    display: grid;
    /* "Cant. de ambientes" un poco más ancho para que entre "Monoambiente (1 amb.)" */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: end;
}
.search-bar form > div { min-width: 0; }
.search-bar label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--color-ink);
}
.search-bar select,
.search-bar input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    font: inherit;
    font-size: 16px; /* evita el zoom automático en iOS */
    color: var(--color-ink);
    background-color: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* Flecha propia para los select (misma en todos los navegadores) */
.search-bar select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    text-overflow: ellipsis;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23767676' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
}
/* Campo de precio sin las flechitas de número */
.search-bar input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.search-bar input[type="number"]::-webkit-inner-spin-button,
.search-bar input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.search-bar input::placeholder { color: var(--color-text-light); opacity: 1; }
.search-bar select:hover,
.search-bar input:hover { border-color: var(--color-text-light); }
.search-bar select:focus,
.search-bar input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}
.search-bar .btn {
    height: 48px;
    padding-top: 0;
    padding-bottom: 0;
    padding-inline: var(--space-6);
}

/* ===================== PROPIEDADES RECIENTES ===================== */
.home-recent { padding-top: var(--space-8); }
.home-recent__more {
    display: flex;
    justify-content: center;
    margin-top: var(--space-7);
}

/* ===================== EXPLORÁ POR TIPO ===================== */
.home-types__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}
.home-type {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 100%;
    min-height: 84px;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.home-type:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--color-primary-rgb), 0.35);
    box-shadow: var(--shadow-lg);
}
.home-type:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Base visual en .icon-chip (base.css); acá solo tamaño y transición */
.home-type__icon {
    width: 48px;
    height: 48px;
    font-size: 1.15rem;
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.home-type:hover .home-type__icon { background: var(--color-primary); color: var(--color-white); }
.home-type__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.home-type__name {
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: var(--lh-snug);
    color: var(--color-ink);
    overflow-wrap: anywhere;
}
.home-type__count {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}
.home-type__arrow {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    color: var(--color-line-strong);
    transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.home-type:hover .home-type__arrow { color: var(--color-primary); transform: translateX(3px); }

/* ===================== HOME MAP ===================== */
/* Marco tipo tarjeta alrededor del mapa (altura explícita, nunca sticky) */
.home-map-frame {
    position: relative;
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.home-map {
    position: relative;
    z-index: 0; /* encierra los z-index internos de Leaflet debajo del menú fijo */
    height: 520px;
    max-width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.home-map-frame__note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3) var(--space-1);
    font-size: var(--fs-sm);
    color: var(--color-text-light);
}
.home-map-frame__note i { color: var(--color-primary); }

/* ===================== CTA FINAL ===================== */
.home-cta { padding-top: 0; }

/* ===================== MOVIMIENTO REDUCIDO ===================== */
@media (prefers-reduced-motion: reduce) {
    .hero__featured,
    .hero__featured-link i,
    .home-type,
    .home-type__icon,
    .home-type__arrow,
    .search-bar select,
    .search-bar input { transition: none; }
    .hero__featured:hover,
    .home-type:hover,
    .hero__featured:hover .hero__featured-link i,
    .home-type:hover .home-type__arrow { transform: none; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1100px) {
    .search-bar form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .search-bar form > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 992px) {
    .hero { min-height: 0; }
    .hero__container { grid-template-columns: minmax(0, 1fr); }
    .hero__featured { display: none; }
    .home-types__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-map { height: 440px; }
}

@media (max-width: 768px) {
    .hero { padding: var(--space-7) 0 calc(var(--space-8) + var(--space-5)); }
    .hero__lead { font-size: var(--fs-base); margin-bottom: var(--space-5); }
    .hero__stats { margin-top: var(--space-6); padding-top: var(--space-4); }
    .search-bar { padding: var(--space-4); border-radius: var(--radius-md); }
    .search-bar--hero { margin-top: calc(-1 * var(--space-7)); }
    .search-bar form { gap: var(--space-3); }
    .home-recent { padding-top: var(--space-7); }
    .home-recent__more { margin-top: var(--space-6); }
    .home-types__grid { gap: var(--space-3); }
    .home-type { gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 72px; }
    .home-type__icon { width: 44px; height: 44px; font-size: 1.05rem; }
    .home-type__arrow { display: none; }
    .home-map-frame { padding: 6px; border-radius: var(--radius-md); }
    .home-map { height: 380px; border-radius: 10px; }
}

@media (max-width: 480px) {
    .hero__eyebrow { margin-bottom: var(--space-4); }
    .hero__actions .btn { flex: 1 1 auto; }
    .hero__stats li { padding-right: var(--space-4); margin-right: var(--space-4); }
    .hero__stats strong { font-size: var(--fs-lg); }
    .search-bar form { grid-template-columns: minmax(0, 1fr); }
    /* Tipos en 2 columnas, con el ícono arriba para que entren los nombres largos */
    .home-type { flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); }
    .home-map { height: 340px; }
}