/* ── Web Koi Frontend CSS v2 ──────────────────────────────── */
/* Uses CSS variables from Web Koi Theme (theme.css) */
/* No duplicate :root — theme is canonical */

/* Grid */
.wk-grid { display: grid; gap: 24px; }
.wk-cols-1 { grid-template-columns: 1fr; }
.wk-cols-2 { grid-template-columns: repeat(2, 1fr); }
.wk-cols-3 { grid-template-columns: repeat(3, 1fr); }
.wk-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .wk-cols-3, .wk-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .wk-cols-2, .wk-cols-3, .wk-cols-4 { grid-template-columns: 1fr; } }

/* Card */
.wk-card {
    background: var(--wk-white, #fff);
    border-radius: var(--wk-radius, 8px);
    border: none;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s;
    position: relative;
}
.wk-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.06); }
.wk-card--featured { box-shadow: 0 2px 8px rgba(191,145,59,.15); }

.wk-card__badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.wk-badge--featured { background: var(--wk-gold, #BF913B); color: var(--wk-navy, #1C1C1C); }
.wk-badge--new { background: var(--wk-olive, #8C8C8C); color: #fff; }
.wk-badge--pre { background: var(--wk-gold-l, #D4AD5A); color: #fff; }

.wk-card__op {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    background: rgba(0,0,0,.6); color: #fff; backdrop-filter: blur(4px);
    padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase;
}

.wk-card__img-link { display: block; overflow: hidden; aspect-ratio: 16/10; }
.wk-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.wk-card__img-link:hover .wk-card__img { transform: scale(1.05); }
.wk-card__img-placeholder { aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #EDEAE6 0%, #DDD9D5 100%); color: var(--wk-olive, #8C8C8C); font-size: 32px; opacity: .6; }

.wk-card__body { padding: 20px 20px 24px; }
.wk-card__location { font-size: 11px; color: var(--wk-gold, #BF913B); margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.wk-card__title { margin: 0 0 12px; font-size: 17px; font-weight: 700; line-height: 1.25; }
.wk-card__title a { color: var(--wk-navy, #1C1C1C); text-decoration: none; font-family: var(--wk-font-h); }
.wk-card__title a:hover { color: var(--wk-gold, #BF913B); }

.wk-card__price { font-size: 20px; font-weight: 700; color: var(--wk-gold, #BF913B); font-family: var(--wk-font-h); margin-bottom: 4px; }
.wk-card__price-alt { font-size: 13px; color: var(--wk-muted, #8C8C8C); margin-bottom: 8px; }
.wk-card__price--consult { color: var(--wk-olive, #8C8C8C); font-size: 14px; font-weight: 600; font-style: italic; font-family: var(--wk-font-b, 'Josefin Sans', sans-serif); }
.wk-card__specs { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--wk-muted, #8C8C8C); margin-bottom: 16px; padding-top: 12px; border-top: 1px solid var(--wk-border, #E8E4E0); }
.wk-card__specs span { display: flex; align-items: center; gap: 3px; }

.wk-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Buttons */
.wk-btn {
    display: inline-block; padding: 8px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 600; text-decoration: none; text-align: center; transition: all .2s;
}
.wk-btn:hover { transform: translateY(-1px); }
.wk-btn--primary { background: var(--wk-navy, #1C1C1C); color: #fff; flex: 1; }
.wk-btn--primary:hover { box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.wk-btn--whatsapp { background: transparent; color: var(--wk-gold, #BF913B); border: 1px solid var(--wk-gold, #BF913B); }
.wk-btn--whatsapp:hover { background: var(--wk-gold, #BF913B); color: var(--wk-navy, #1C1C1C); }

/* Search */
.wk-search-form { background: var(--wk-white, #fff); padding: 20px; border-radius: var(--wk-radius, 12px); box-shadow: 0 2px 12px rgba(0,0,0,.06); margin-bottom: 28px; border: 1px solid var(--wk-border, #E8E4E0); width: 100%; box-sizing: border-box; }
.wk-search-fields { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; width: 100%; }
.wk-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 160px; }
.wk-field select { width: 100%; box-sizing: border-box; }
@media (max-width: 600px) {
    .wk-search-fields { flex-direction: column; }
    .wk-field { min-width: 0; width: 100%; flex: none; }
    .wk-field-submit { width: 100%; }
    .wk-btn-search { width: 100%; }
}
.wk-field label { font-size: 12px; font-weight: 600; color: var(--wk-muted, #8C8C8C); text-transform: uppercase; letter-spacing: .06em; }
.wk-field select {
    padding: 10px 36px 10px 14px;
    border: 1px solid var(--wk-border, #E8E4E0);
    border-radius: 8px;
    font-size: 14px;
    color: var(--wk-text, #1C1C1C);
    background: var(--wk-white, #fff);
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23BF913B' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition: border-color .2s;
    font-family: var(--wk-font-b, 'Josefin Sans', sans-serif);
}
.wk-field select:focus { outline: none; border-color: var(--wk-gold, #BF913B); box-shadow: 0 0 0 3px rgba(191,145,59,.1); }
.wk-field-submit { min-width: auto; }
.wk-btn-search { padding: 10px 28px; background: var(--wk-gold, #BF913B); color: var(--wk-navy, #1C1C1C); border: none; border-radius: 8px; font-size: 14px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: all .2s; text-transform: uppercase; letter-spacing: .04em; }
.wk-btn-search:hover { background: var(--wk-gold-l, #D4AD5A); transform: translateY(-1px); }

/* Contact form */
.wk-contact-form { background: var(--wk-light, #F5F1E8); padding: 24px; border-radius: var(--wk-radius, 12px); border: 1px solid var(--wk-border, #E8E4E0); }
.wk-contact-form h3 { margin: 0 0 16px; font-size: 18px; color: var(--wk-navy, #1C1C1C); font-family: var(--wk-font-h); }
.wk-form-row { margin-bottom: 12px; }
.wk-input { width: 100%; padding: 10px 14px; border: 1px solid var(--wk-border, #E8E4E0); border-radius: 8px; font-size: 14px; box-sizing: border-box; background: var(--wk-white, #fff); }
.wk-input:focus { outline: none; border-color: var(--wk-gold, #BF913B); box-shadow: 0 0 0 3px rgba(191,145,59,.1); }
.wk-btn-submit { width: 100%; padding: 12px; background: var(--wk-navy, #1C1C1C); color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all .2s; }
.wk-btn-submit:hover { background: var(--wk-navy-l, #2d2d2d); }
.wk-form-response { margin-top: 12px; font-size: 13px; font-weight: 600; }
.wk-form-response.success { color: #2E7D32; }
.wk-form-response.error   { color: #C62828; }

.wk-no-results { padding: 40px; text-align: center; color: var(--wk-muted, #8C8C8C); background: var(--wk-light, #F5F1E8); border-radius: var(--wk-radius, 12px); }

/* Map */
#wk-mapa-propiedades { height: 480px; border-radius: var(--wk-radius, 12px); overflow: hidden; }

/* Responsive */
@media (max-width: 768px) {
    .wk-search-fields { flex-direction: column; }
}