/* Ficha Homesya (ES, México, Bali) — mosaico 1+4, cabecera con H1 sobre las
   columnas, datos clave bajo el precio y secciones en tarjeta. 5-oct-2026.
   Acento = --hy-primary del portal (índigo ES, color propio MX/Bali). */
:root {
    --hyf-accent: var(--hy-primary, #3433b2);
    --hyf-line: #e7e3da;
    --hyf-ink: #1e293b;
    --hyf-muted: #64748b;
    --hyf-radius: 18px;
}

/* ── Galería ─────────────────────────────────────────────── */
.hy-gal {
    position: relative;
    max-width: 1110px;
    margin: 8px auto 20px;
}
.hy-gal-track {
    display: grid;
    gap: 8px;
    height: 460px;
    border-radius: var(--hyf-radius);
    overflow: hidden;
}
.hy-gal--n5 .hy-gal-track { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.hy-gal--n4 .hy-gal-track,
.hy-gal--n3 .hy-gal-track { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }

.hy-gal--n5 .hy-gal-item:nth-child(n+6),
.hy-gal--n4 .hy-gal-item:nth-child(n+4),
.hy-gal--n3 .hy-gal-item:nth-child(n+4) { display: none; }

.hy-gal-item {
    all: unset;
    position: relative;
    display: block;
    overflow: hidden;
    cursor: zoom-in;
    background: #ece8e0;
    min-width: 0;
    min-height: 0;
}
.hy-gal-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease, filter .3s ease;
}
.hy-gal-item:hover img { transform: scale(1.03); filter: brightness(.94); }
.hy-gal .hy-gal-item--main { grid-row: 1 / span 2; }
.hy-gal-item:focus-visible { outline: 3px solid var(--hyf-accent); outline-offset: -3px; }
.hy-gal--sold .hy-gal-item img { filter: grayscale(1); }

.hy-gal-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.hy-gal-badge--sold { background: #dc2626; }

.hy-gal-all {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--hyf-ink);
    border-radius: 999px;
    background: #fff;
    color: var(--hyf-ink);
    font: 600 13px/1 inherit;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    transition: transform .15s ease;
}
.hy-gal-all:hover { transform: translateY(-1px); }
.hy-gal-count { display: none; }

/* ── Cabecera ────────────────────────────────────────────── */
.hy-head {
    max-width: 1110px;
    margin: 0 auto 22px;
}
.hy-head-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    color: var(--hyf-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.hy-head-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: currentColor;
    flex-shrink: 0;
}
.hy-head-title {
    margin: 0;
    color: var(--hyf-ink);
    font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-wrap: balance;
}

/* Con mosaico, la galería vieja (slider) sobra en todos los tamaños. */
.hy-has-mosaic .listing-primary-column > .image-gallery { display: none !important; }

/* ── Tarjeta de precio ───────────────────────────────────── */
.hy-ficha .price-card {
    border: 1px solid var(--hyf-line) !important;
    border-radius: var(--hyf-radius);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
}
.hy-ficha .sidebar-card { border-radius: var(--hyf-radius); }
.hy-facts {
    margin: 16px 0 4px;
    padding: 4px 14px;
    border: 1px solid var(--hyf-line);
    border-radius: 12px;
    background: #faf8f4;
}
.hy-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    font-size: 13px;
}
.hy-facts > div + div { border-top: 1px solid #efebe3; }
.hy-facts dt { color: var(--hyf-muted); margin: 0; }
.hy-facts dd { margin: 0; color: var(--hyf-ink); font-weight: 600; text-align: right; }

/* ── Secciones en tarjeta ────────────────────────────────── */
.hy-ficha .listing-primary-column > .product-description,
.hy-ficha .listing-primary-column > .accordion-section,
.hy-ficha .listing-primary-column > section,
.hy-ficha .listing-primary-column > .location-section {
    background: #fff;
    border: 1px solid var(--hyf-line) !important;
    border-radius: var(--hyf-radius) !important;
    box-shadow: none !important;
}
.hy-ficha .description-title {
    color: var(--hyf-ink);
    letter-spacing: -.01em;
}

/* ── Móvil / tablet: carrusel con scroll-snap ────────────── */
@media (max-width: 1105px) {
    .hy-gal { margin: 0 0 14px; }
    .hy-gal-track {
        display: flex;
        height: auto;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        border-radius: 0;
        -webkit-overflow-scrolling: touch;
    }
    .hy-gal-track::-webkit-scrollbar { display: none; }
    .hy-gal .hy-gal-item,
    .hy-gal .hy-gal-item:nth-child(n) {
        display: block;
        flex: 0 0 88%;
        aspect-ratio: 4 / 3;
        scroll-snap-align: start;
        border-radius: 14px;
    }
    .hy-gal-item:first-child { margin-left: 12px; }
    .hy-gal-item:last-child { margin-right: 12px; }
    .hy-gal-item:hover img { transform: none; filter: none; }
    .hy-gal-badge { left: 24px; }
    .hy-gal-all { display: none; }
    .hy-gal-count {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        position: absolute;
        right: 22px;
        bottom: 10px;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(15, 23, 42, .7);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        pointer-events: none;
    }
    .hy-head { padding: 0 16px; margin-bottom: 10px; }
}
@media (min-width: 1106px) and (max-width: 1180px) {
    .hy-gal, .hy-head { padding: 0 15px; }
}