/* ============================================================
   Los valores :root se sobreescriben en cada página mediante
   un <style> inline generado con los "settings" de la BD
   (ver includes/header.php -> función cssVariables())
   ============================================================ */
:root {
    --color-primario: #0F4C81;
    --color-secundario: #F2A93B;
    --color-fondo: #F7F8FA;
    --color-texto: #1E1E1E;
    --color-header-texto: #FFFFFF;
    --fuente-titulos: 'Poppins', sans-serif;
    --fuente-texto: 'Roboto', sans-serif;
    --tamano-titulo: 28px;
    --tamano-texto: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--fuente-texto);
    font-size: var(--tamano-texto);
    color: var(--color-texto);
    background: var(--color-fondo);
    line-height: 1.5;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-titulos);
    color: var(--color-primario);
}

h1 { font-size: var(--tamano-titulo); }

a { color: var(--color-primario); text-decoration: none; }

.contenedor { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ---------- Header ---------- */
header.site-header {
    background: var(--color-primario);
    color: var(--color-header-texto);
    position: sticky; top: 0; z-index: 100;
}
header.site-header .barra {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; max-width: 1200px; margin: 0 auto;
}
header.site-header .logo { font-family: var(--fuente-titulos); font-size: 22px; font-weight: 700; color: var(--color-header-texto); }
nav.menu { display: flex; gap: 18px; flex-wrap: wrap; }
nav.menu a { color: var(--color-header-texto); font-weight: 500; }
nav.menu a:hover { color: var(--color-secundario); }
.menu-toggle { display: none; background: none; border: none; color: var(--color-header-texto); font-size: 26px; cursor: pointer; }

/* ---------- Botones ---------- */
.btn {
    display: inline-block; padding: 10px 20px; border-radius: 6px; border: none;
    background: var(--color-secundario); color: #1E1E1E; font-weight: 600; cursor: pointer;
}
.btn:hover { opacity: .88; }
.btn-primario { background: var(--color-primario); color: #fff; }

/* ---------- Buscador de propiedades ---------- */
.buscador {
    background: #fff; border-radius: 10px; padding: 18px; margin: 24px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px;
}
.buscador select, .buscador input {
    padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; width: 100%;
}
.buscador .btn { grid-column: span 1; align-self: end; }

/* ---------- Grid de propiedades ---------- */
.grid-propiedades {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 22px; margin: 24px 0;
}
.card-propiedad {
    background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.08);
    transition: transform .15s;
}
.card-propiedad:hover { transform: translateY(-4px); }
.card-propiedad .foto-wrap { position: relative; height: 190px; overflow: hidden; background:#e9e9e9; }
.card-propiedad .foto-wrap img { width: 100%; height: 100%; object-fit: cover; user-select:none; pointer-events:none; -webkit-user-drag:none; }
.badge-operacion { position:absolute; top:10px; left:10px; background:var(--color-primario); color:#fff; padding:4px 10px; border-radius:20px; font-size:12px; }
.badge-estado { position:absolute; top:10px; right:10px; padding:4px 10px; border-radius:20px; font-size:12px; color:#fff; }
.badge-disponible { background:#2e9e5b; }
.badge-alquilada, .badge-vendida { background:#b23b3b; }
.card-body { padding: 14px; }
.card-body .precio { font-size: 20px; font-weight: 700; color: var(--color-primario); }
.card-body .ubicacion { color:#666; font-size:14px; margin:4px 0; }
.card-body .datos { display:flex; gap:12px; font-size:13px; color:#555; margin-top:8px; }

/* ---------- Detalle propiedad ---------- */
.galeria-detalle { display:grid; grid-template-columns: 2fr 1fr; gap:10px; }
.galeria-detalle img { width:100%; border-radius:8px; object-fit:cover; height:100%; user-select:none; pointer-events:none; }
.mapa-box { height: 260px; border-radius: 10px; margin-top: 16px; }
@media (max-width: 700px) { .galeria-detalle { grid-template-columns: 1fr; } }

/* ---------- Tarjetas genéricas (noticias, equipo, comentarios) ---------- */
.grid-noticias, .grid-equipo { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 22px; margin: 24px 0; }
.card { background:#fff; border-radius:10px; overflow:hidden; box-shadow: 0 2px 10px rgba(0,0,0,.08); padding: 16px; }
.card img { width:100%; border-radius: 8px; margin-bottom: 10px; }

.estrellas { color: var(--color-secundario); font-size: 18px; }

form.form-panel { background:#fff; border-radius:10px; padding:20px; max-width:640px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
form.form-panel label { display:block; margin-top:12px; font-weight:600; font-size:14px; }
form.form-panel input, form.form-panel select, form.form-panel textarea {
    width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; margin-top:4px; font-family: inherit;
}
.captcha-box { display:flex; align-items:center; gap:10px; background:#f0f0f0; padding:10px; border-radius:6px; margin-top:10px; }

/* ---------- Footer ---------- */
footer.site-footer { background:#1E1E1E; color:#ddd; margin-top:40px; padding:30px 0; text-align:center; font-size:14px; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    nav.menu { display:none; flex-direction:column; width:100%; background: var(--color-primario); position:absolute; top:100%; left:0; padding:10px 16px; }
    nav.menu.abierto { display:flex; }
    .menu-toggle { display:block; }
}