/* ═══════════════════════════════════════════════════════════════
   Airtable Sync — Shortcode Inmuebles
   Basado en el diseño El Sol · prefijo: ast-inh-
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ── Variables ── */
.ast-inh-root {
    --inh-font:       'Outfit', sans-serif;
    --inh-dark:       #1A1200;
    --inh-orange:     #E8820C;
    --inh-orange-lt:  #FFF8ED;
    --inh-orange-dk:  #d1750a;
    --inh-muted:      #AAAAAA;
    --inh-mid:        #555555;
    --inh-border:     rgba(0,0,0,0.08);
    --inh-bg:         #F7F6F3;
    --inh-white:      #FFFFFF;
    --inh-green:      #1D8A4E;
    --inh-green-lt:   #EAFAF2;
    --inh-radius-sm:  6px;
    --inh-radius:     10px;
    --inh-radius-lg:  14px;
    --inh-shadow:     0 4px 20px rgba(0,0,0,0.07);
    --inh-shadow-hov: 0 8px 30px rgba(0,0,0,0.11);

    font-family: var(--inh-font) !important;
    background:  var(--inh-bg) !important;
    width:       100% !important;
    padding:     0 0 80px !important;
}

.ast-inh-root *, .ast-inh-root *::before, .ast-inh-root *::after {
    box-sizing: border-box !important;
    font-family: var(--inh-font) !important;
}

/* ══════════════════════════════════════
   FILTROS
══════════════════════════════════════ */
.ast-inh-filters {
    background:    var(--inh-white) !important;
    border-bottom: 1px solid var(--inh-border) !important;
    padding:       16px 48px !important;
    position:      sticky !important;
    top:           0 !important;
    z-index:       30 !important;
}

.ast-inh-filter-row {
    display:     flex !important;
    align-items: center !important;
    gap:         10px !important;
    flex-wrap:   wrap !important;
}
.ast-inh-filter-row--top    { margin-bottom: 12px !important; }
.ast-inh-filter-row--zones  { gap: 6px !important; }

/* Select */
.ast-inh-select {
    font-size:          13px !important;
    font-weight:        500 !important;
    color:              var(--inh-dark) !important;
    background-color:   var(--inh-white) !important;
    border:             1px solid rgba(0,0,0,0.12) !important;
    border-radius:      var(--inh-radius-sm) !important;
    padding:            8px 32px 8px 14px !important;
    outline:            none !important;
    cursor:             pointer !important;
    appearance:         none !important;
    -webkit-appearance: none !important;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%231A1200' stroke-width='1.5'/%3E%3C/svg%3E") !important;
    background-repeat:  no-repeat !important;
    background-position:right 10px center !important;
    transition:         border-color 0.15s !important;
}
.ast-inh-select:hover,
.ast-inh-select:focus { border-color: var(--inh-orange) !important; }

/* Habitaciones */
.ast-inh-beds-group {
    display: flex !important;
    gap:     4px !important;
}
.ast-inh-bed-btn {
    font-size:   12px !important;
    font-weight: 600 !important;
    padding:     8px 14px !important;
    border-radius: var(--inh-radius-sm) !important;
    border:      1px solid rgba(0,0,0,0.12) !important;
    background:  transparent !important;
    color:       var(--inh-muted) !important;
    cursor:      pointer !important;
    line-height: 1 !important;
    transition:  all 0.15s !important;
}
.ast-inh-bed-btn:hover {
    border-color: var(--inh-orange) !important;
    color:        var(--inh-orange) !important;
}
.ast-inh-bed-btn.active {
    border-color: var(--inh-orange) !important;
    background:   var(--inh-orange-lt) !important;
    color:        var(--inh-orange) !important;
}

/* Contador y limpiar */
.ast-inh-count {
    font-size:   13px !important;
    font-weight: 400 !important;
    color:       var(--inh-muted) !important;
    margin-left: 4px !important;
}
.ast-inh-clear {
    font-size:       12px !important;
    font-weight:     500 !important;
    color:           var(--inh-orange) !important;
    background:      none !important;
    border:          none !important;
    cursor:          pointer !important;
    padding:         4px 0 !important;
    text-decoration: underline !important;
}

/* Zona pills */
.ast-inh-zone-pill {
    font-size:     11px !important;
    font-weight:   500 !important;
    padding:       5px 12px !important;
    border-radius: 20px !important;
    border:        1px solid rgba(0,0,0,0.10) !important;
    background:    transparent !important;
    color:         var(--inh-muted) !important;
    cursor:        pointer !important;
    transition:    all 0.15s !important;
    line-height:   1 !important;
    white-space:   nowrap !important;
}
.ast-inh-zone-pill:hover {
    border-color: var(--inh-orange) !important;
    color:        var(--inh-orange) !important;
}
.ast-inh-zone-pill.active {
    background:   var(--inh-dark) !important;
    border-color: var(--inh-dark) !important;
    color:        var(--inh-white) !important;
}
.ast-inh-zone-pill.active:hover {
    background:   #333 !important;
    border-color: #333 !important;
}

/* ══════════════════════════════════════
   GRID
══════════════════════════════════════ */
.ast-inh-grid-wrap {
    padding: 40px 48px 0 !important;
}
.ast-inh-grid {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap:                   24px !important;
    max-width:             1200px !important;
    margin:                0 auto !important;
}

/* ══════════════════════════════════════
   CARD
══════════════════════════════════════ */
.ast-inh-card {
    background:     var(--inh-white) !important;
    border-radius:  var(--inh-radius-lg) !important;
    overflow:       hidden !important;
    border:         1px solid var(--inh-border) !important;
    cursor:         pointer !important;
    transition:     transform 0.2s ease, box-shadow 0.2s ease !important;
    display:        flex !important;
    flex-direction: column !important;
    text-decoration:none !important;
    color:          inherit !important;
}
.ast-inh-card:hover {
    transform:  translateY(-3px) !important;
    box-shadow: var(--inh-shadow-hov) !important;
}

/* Imagen */
.ast-inh-card-img {
    position:        relative !important;
    width:           100% !important;
    height:          210px !important;
    background:      #EDE9E0 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex-shrink:     0 !important;
    overflow:        hidden !important;
}
.ast-inh-card-img img {
    width:      100% !important;
    height:     100% !important;
    object-fit: cover !important;
    display:    block !important;
    transition: transform 0.4s ease !important;
}
.ast-inh-card:hover .ast-inh-card-img img {
    transform: scale(1.04) !important;
}

/* Placeholder cuando no hay imagen */
.ast-inh-card-img-placeholder {
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    gap:            8px !important;
    opacity:        0.35 !important;
}
.ast-inh-card-img-placeholder svg {
    width:  36px !important;
    height: 36px !important;
}
.ast-inh-card-img-placeholder span {
    font-size:      14px !important;
    font-weight:    600 !important;
    color:          var(--inh-dark) !important;
    letter-spacing: 0.02em !important;
}

/* Tags sobre imagen */
.ast-inh-card-tags {
    position:  absolute !important;
    top:       10px !important;
    left:      10px !important;
    display:   flex !important;
    gap:       5px !important;
    flex-wrap: wrap !important;
    z-index:   2 !important;
}
.ast-inh-tag {
    font-size:      9px !important;
    font-weight:    700 !important;
    padding:        4px 8px !important;
    border-radius:  4px !important;
    background:     rgba(26,18,0,0.65) !important;
    color:          var(--inh-white) !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    backdrop-filter: blur(4px) !important;
}
.ast-inh-tag--orange { background: var(--inh-orange) !important; }

/* Badge destacado */
.ast-inh-badge-dest {
    position:       absolute !important;
    top:            10px !important;
    right:          10px !important;
    font-size:      9px !important;
    font-weight:    700 !important;
    padding:        4px 10px !important;
    border-radius:  4px !important;
    background:     var(--inh-orange) !important;
    color:          var(--inh-white) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    z-index:        2 !important;
}

/* Card body */
.ast-inh-card-body {
    padding:        18px 20px 20px !important;
    flex:           1 !important;
    display:        flex !important;
    flex-direction: column !important;
}

.ast-inh-card-meta {
    display:         flex !important;
    justify-content: space-between !important;
    align-items:     center !important;
    margin-bottom:   6px !important;
}
.ast-inh-card-zona {
    display:        inline-flex !important;
    align-items:    center !important;
    gap:            4px !important;
    font-size:      10px !important;
    font-weight:    700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color:          var(--inh-orange) !important;
}
.ast-inh-card-tipo {
    display:     inline-flex !important;
    align-items: center !important;
    gap:         4px !important;
    font-size:   12px !important;
    font-weight: 300 !important;
    color:       var(--inh-muted) !important;
}

.ast-inh-card-titulo {
    font-size:      19px !important;
    font-weight:    700 !important;
    color:          var(--inh-dark) !important;
    margin-bottom:  10px !important;
    line-height:    1.2 !important;
    letter-spacing: -0.01em !important;
}

/* Precio */
.ast-inh-price-row {
    display:       flex !important;
    align-items:   baseline !important;
    gap:           8px !important;
    flex-wrap:     wrap !important;
    margin-bottom: 12px !important;
}
.ast-inh-price {
    font-size:      24px !important;
    font-weight:    800 !important;
    color:          var(--inh-dark) !important;
    letter-spacing: -0.03em !important;
}
.ast-inh-price-m2 {
    font-size:   12px !important;
    font-weight: 400 !important;
    color:       var(--inh-muted) !important;
}

/* Chips */
.ast-inh-chips {
    display:       flex !important;
    gap:           14px !important;
    flex-wrap:     wrap !important;
    margin-bottom: 14px !important;
    padding-bottom:12px !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
.ast-inh-chip {
    display:     inline-flex !important;
    align-items: center !important;
    gap:         5px !important;
    font-size:   13px !important;
    font-weight: 400 !important;
    color:       var(--inh-mid) !important;
}
/* Todos los SVG dentro de la card: tamaño fijo, nunca desborda */
.ast-inh-card svg {
    display:    inline-block !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}
.ast-inh-chip svg,
.ast-inh-card-zona svg,
.ast-inh-card-tipo svg {
    width:  14px !important;
    height: 14px !important;
    color:  var(--inh-orange) !important;
}
.ast-inh-card-cta svg {
    width:  14px !important;
    height: 14px !important;
    color:  inherit !important;
}

/* CTA */
.ast-inh-card-cta {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             6px !important;
    width:           100% !important;
    background:      var(--inh-dark) !important;
    color:           var(--inh-white) !important;
    font-size:       13px !important;
    font-weight:     600 !important;
    padding:         13px !important;
    border-radius:   var(--inh-radius-sm) !important;
    text-align:      center !important;
    border:          none !important;
    cursor:          pointer !important;
    transition:      background 0.2s !important;
    margin-top:      auto !important;
    text-decoration: none !important;
}
.ast-inh-card-cta:hover { background: var(--inh-orange) !important; color: var(--inh-white) !important; }
.ast-inh-card-cta svg   { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; }

/* ══════════════════════════════════════
   PAGINACIÓN
══════════════════════════════════════ */
.ast-inh-pagination {
    display:         flex !important;
    justify-content: center !important;
    align-items:     center !important;
    gap:             6px !important;
    margin-top:      48px !important;
    max-width:       1200px !important;
    margin-left:     auto !important;
    margin-right:    auto !important;
}
.ast-inh-page-btn {
    width:         36px !important;
    height:        36px !important;
    border-radius: 8px !important;
    border:        1px solid var(--inh-border) !important;
    background:    var(--inh-white) !important;
    color:         var(--inh-mid) !important;
    font-size:     13px !important;
    font-weight:   500 !important;
    cursor:        pointer !important;
    display:       flex !important;
    align-items:   center !important;
    justify-content:center !important;
    transition:    all 0.15s !important;
}
.ast-inh-page-btn:hover:not(:disabled) {
    border-color: var(--inh-orange) !important;
    color:        var(--inh-orange) !important;
}
.ast-inh-page-btn.active {
    background:   var(--inh-dark) !important;
    border-color: var(--inh-dark) !important;
    color:        var(--inh-white) !important;
}
.ast-inh-page-btn:disabled {
    opacity: 0.35 !important;
    cursor:  default !important;
}
.ast-inh-page-prev, .ast-inh-page-next { width: auto !important; padding: 0 12px !important; }

/* ══════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════ */
.ast-inh-empty {
    text-align:  center !important;
    padding:     80px 24px !important;
    max-width:   1200px !important;
    margin:      0 auto !important;
}
.ast-inh-empty p {
    font-size:     16px !important;
    font-weight:   300 !important;
    color:         var(--inh-muted) !important;
    margin-bottom: 12px !important;
}

/* ══════════════════════════════════════
   ANIMACIONES
══════════════════════════════════════ */
@keyframes ast-inh-popin {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ast-inh-card--entering {
    animation: ast-inh-popin 0.3s ease forwards !important;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1024px) {
    .ast-inh-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 700px) {
    .ast-inh-filters  { padding: 14px 20px !important; }
    .ast-inh-grid-wrap { padding: 24px 16px 0 !important; }
    .ast-inh-grid     { grid-template-columns: 1fr !important; gap: 16px !important; }
    .ast-inh-price    { font-size: 20px !important; }
}