/* =====================================================================
   Alquileres Pucallpa - Identidad visual amazonica
   Paleta: selva, hoja, rio, sol, tierra. Solo CSS (sin imagenes externas).
   ===================================================================== */

:root {
    --selva:   #0B6B3A;
    --hoja:    #16A34A;
    --rio:     #06B6D4;
    --sol:     #FACC15;
    --tierra:  #F5E6C8;
    --fondo:   #F8FAF5;
    --texto:   #1F2937;
    --wa:      #25D366;

    --radius:   1rem;
    --radius-sm:.65rem;
    --shadow:   0 4px 18px rgba(11, 107, 58, .08);
    --shadow-hover: 0 14px 34px rgba(11, 107, 58, .18);
}

/* ----------------------------- Base ----------------------------- */
body {
    background-color: var(--fondo);
    color: var(--texto);
    /* patron suave de puntos calidos, muy sutil */
    background-image:
        radial-gradient(circle at 1px 1px, rgba(11,107,58,.05) 1px, transparent 0);
    background-size: 22px 22px;
}

a { color: var(--selva); }
a:hover { color: var(--hoja); }

.text-selva { color: var(--selva) !important; }
.text-rio   { color: var(--rio) !important; }

/* Tarjetas redondeadas con sombra suave en todo el sitio */
.card {
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* --------------------------- Navbar ----------------------------- */
.navbar {
    background: #ffffff !important;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--selva), var(--hoja), var(--rio)) 1;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.navbar-brand {
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 1.35rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.navbar-brand .brand-leaf {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--selva), var(--hoja));
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(11,107,58,.3);
}
.navbar-brand .brand-1 { color: var(--selva); }
.navbar-brand .brand-2 { color: var(--rio); }

.navbar .nav-link {
    font-weight: 600;
    color: var(--texto);
    border-radius: 999px;
    padding: .45rem .95rem !important;
    margin-left: .25rem;
    transition: all .15s ease;
}
.navbar .nav-link:hover { background: rgba(22,163,74,.1); color: var(--selva); }
.navbar .nav-link.nav-admin {
    background: var(--tierra);
    color: var(--selva);
}
.navbar .nav-link.nav-admin:hover { background: var(--sol); color: var(--texto); }

/* ---------------------------- Hero ------------------------------ */
.hero {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 2rem 2rem;
    background: linear-gradient(135deg, var(--selva) 0%, var(--hoja) 45%, var(--rio) 100%);
    color: #fff;
    padding: 3.2rem 0 3.6rem;
    margin-bottom: 2rem;
}
/* Formas suaves (blobs) decorativas */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    z-index: 0;
}
.hero::before {
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(250,204,21,.35), transparent 70%);
    top: -120px; right: -60px;
}
.hero::after {
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
    bottom: -130px; left: -70px;
}
/* Patron de hojas en SVG embebido (sin archivos externos) */
.hero-decor {
    position: absolute; inset: 0; z-index: 0; opacity: .12;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M30 90 C30 50 60 30 95 25 C90 60 65 88 30 90 Z' fill='none' stroke='%23ffffff' stroke-width='3'/%3E%3Cpath d='M30 90 C50 70 72 52 92 33' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 150px 150px;
}
.hero-content { position: relative; z-index: 1; }
.hero-title {
    font-weight: 800;
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    line-height: 1.12;
    text-shadow: 0 2px 12px rgba(0,0,0,.18);
    margin-bottom: .65rem;
}
.hero-subtitle {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    opacity: .95;
    margin-bottom: 1.4rem;
    max-width: 640px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.btn-hero-primary {
    background: #fff; color: var(--selva);
    font-weight: 700; border: 0;
    border-radius: 999px; padding: .7rem 1.5rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.btn-hero-primary:hover { background: var(--sol); color: var(--texto); }

.btn-hero-wa {
    background: var(--wa); color: #fff;
    font-weight: 700; border: 0;
    border-radius: 999px; padding: .7rem 1.5rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.btn-hero-wa:hover { background: #1ebe5d; color: #fff; }

/* Mini estadisticas opcionales bajo el hero */
.hero-badges { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.3rem; }
.hero-badge {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.35);
    color:#fff; font-size:.85rem; font-weight:600;
    padding:.35rem .8rem; border-radius:999px;
    backdrop-filter: blur(4px);
}

/* -------------------------- Filtros ----------------------------- */
.filtros-card { position: sticky; top: 1rem; overflow: hidden; }
.filtros-card .filtros-head {
    background: linear-gradient(135deg, var(--selva), var(--hoja));
    color: #fff;
    padding: .9rem 1.1rem;
    font-weight: 700;
    display:flex; align-items:center; gap:.5rem;
}
.filtros-card .form-label { font-weight: 600; font-size: .85rem; color: #4b5563; }
.filtros-card .form-control,
.filtros-card .form-select {
    border-radius: var(--radius-sm);
    border: 1.5px solid #e3e8e1;
    padding: .55rem .8rem;
}
.filtros-card .form-control:focus,
.filtros-card .form-select:focus {
    border-color: var(--hoja);
    box-shadow: 0 0 0 .2rem rgba(22,163,74,.18);
}

.btn-filtrar {
    background: linear-gradient(135deg, var(--hoja), var(--rio));
    color: #fff; font-weight: 700; border: 0;
    border-radius: 999px; padding: .6rem 1rem;
}
.btn-filtrar:hover { filter: brightness(1.05); color:#fff; }
.btn-limpiar {
    background: transparent; color: #6b7280;
    border: 0; font-weight: 600; text-decoration: none;
}
.btn-limpiar:hover { color: var(--selva); text-decoration: underline; }

/* ---------------------- Tarjetas de predio ---------------------- */
.section-title {
    font-weight: 800;
    color: var(--selva);
    position: relative;
    padding-left: .85rem;
}
.section-title::before {
    content:""; position:absolute; left:0; top:.15em; bottom:.15em;
    width:5px; border-radius:4px;
    background: linear-gradient(var(--hoja), var(--rio));
}

.card-predio {
    transition: transform .18s ease, box-shadow .18s ease;
    overflow: hidden;
    height: 100%;
}
.card-predio:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.card-predio .img-wrap {
    aspect-ratio: 4/3; overflow: hidden; background: var(--tierra);
    position: relative; display: block;
}
.card-predio .img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .35s ease;
}
.card-predio:hover .img-wrap img { transform: scale(1.06); }

.card-predio .tipo-badge {
    position: absolute; top: .65rem; left: .65rem;
    background: rgba(11,107,58,.92); color: #fff;
    font-size: .75rem; font-weight: 700;
    padding: .3rem .7rem; border-radius: 999px;
    backdrop-filter: blur(3px);
}
.card-predio .piso-badge {
    position: absolute; top: .65rem; right: .65rem;
    background: rgba(255,255,255,.92); color: var(--texto);
    font-size: .72rem; font-weight: 600;
    padding: .3rem .6rem; border-radius: 999px;
}
.card-predio .card-title { font-weight: 700; color: var(--texto); }
.card-predio .zona { color:#6b7280; font-size:.85rem; }

.precio { font-size: 1.35rem; font-weight: 800; color: var(--selva); }
.precio .por-mes { font-size: .85rem; font-weight: 500; color: #9ca3af; }

.meta-chip { font-size: .8rem; }

/* Botones reutilizables */
.btn-wa {
    background: var(--wa); border-color: var(--wa); color: #fff; font-weight: 600;
    border-radius: 999px;
}
.btn-wa:hover { background: #1ebe5d; border-color: #1ebe5d; color: #fff; }

.btn-ver {
    border: 1.5px solid var(--selva); color: var(--selva);
    background: transparent; font-weight: 600; border-radius: 999px;
}
.btn-ver:hover { background: var(--selva); color: #fff; }

/* ----------------------- Estado vacio --------------------------- */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: #fff;
    border: 2px dashed #d6e3d3;
    border-radius: var(--radius);
}
.empty-state .empty-icon {
    width: 96px; height: 96px; margin: 0 auto 1rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tierra), #fff);
    color: var(--hoja); font-size: 2.6rem;
    box-shadow: inset 0 0 0 4px rgba(22,163,74,.12);
}
.empty-state h3 { font-weight: 800; color: var(--selva); }

/* ----------------------- Detalle predio ------------------------- */
.detalle-titulo { font-weight: 800; color: var(--texto); }
.galeria-principal {
    width: 100%; aspect-ratio: 16/10; object-fit: cover;
    border-radius: var(--radius); background: var(--tierra);
}
.gallery-thumb {
    cursor: pointer; aspect-ratio: 1; object-fit: cover;
    border-radius: var(--radius-sm);
    border: 2px solid transparent; transition: border-color .15s ease, transform .15s ease;
}
.gallery-thumb:hover { border-color: var(--hoja); transform: translateY(-2px); }

.ratio-video iframe { border: 0; border-radius: var(--radius-sm); }

.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--tierra); color: var(--selva);
    font-size: .82rem; font-weight: 600;
    padding: .35rem .75rem; border-radius: 999px;
}

.precio-box {
    position: sticky; top: 1rem;
    background: linear-gradient(135deg, #ffffff, var(--fondo));
    border-top: 5px solid var(--hoja);
}
.precio-box .precio-grande { font-size: 2.1rem; font-weight: 800; color: var(--selva); }

/* Publicacion completa: respeta saltos de linea, legible en celular */
.publicacion {
    font-size: 1.05rem; line-height: 1.8; color: #374151;
    overflow-wrap: anywhere; word-break: break-word;
}

.bloque-info h2 { font-weight: 700; color: var(--selva); }

/* Barra WhatsApp fija en movil */
.wa-fixed {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    padding: .6rem .9rem;
    background: rgba(255,255,255,.96);
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
}

/* ---------------------------- Footer ---------------------------- */
footer.site-footer {
    background: linear-gradient(135deg, #0a5530, var(--selva));
    color: #d7e9dd;
    border-top: 4px solid var(--sol);
}
footer.site-footer a { color: #fff; }

/* --------------------------- Responsive ------------------------- */
@media (max-width: 991.98px) {
    .filtros-card { position: static; }
    /* Tablet: el hero cede espacio a los predios. */
    .hero { padding: 2rem 0 2.2rem; margin-bottom: 1.4rem; }
    .hero-badges { margin-top: 1rem; }
}
@media (max-width: 575.98px) {
    /* Movil: el hero es solo una presentacion breve; lo importante
       (predios y filtros) debe verse casi de inmediato. */
    .hero {
        padding: 1.2rem 0 1.35rem;
        margin-bottom: .9rem;
        border-radius: 0 0 1rem 1rem;
    }
    .hero-title    { font-size: 1.3rem; line-height: 1.2; margin-bottom: .3rem; }
    .hero-subtitle { font-size: .875rem; margin-bottom: .8rem; }
    /* Los badges son decorativos: ocupan alto sin aportar en pantalla chica. */
    .hero-badges   { display: none; }
    /* Los dos botones comparten una sola fila en vez de apilarse. */
    .hero-actions  { gap: .5rem; flex-wrap: nowrap; }
    .hero-actions .btn {
        flex: 1 1 0;
        min-width: 0;
        font-size: .85rem;
        padding: .5rem .6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-shadow: 0 3px 10px rgba(0,0,0,.15);
    }
    /* Blobs decorativos mas chicos para que no desborden el hero reducido. */
    .hero::before { width: 190px; height: 190px; top: -80px; right: -50px; }
    .hero::after  { width: 160px; height: 160px; bottom: -80px; left: -50px; }

    .publicacion { font-size: 1rem; }
    .precio-box { position: static; }
    /* mostrar barra WhatsApp fija solo en movil */
    .wa-fixed { display: block; }
    body.has-wa-fixed { padding-bottom: 4.5rem; }
}