/* =====================================================================
   CONCEPTO INMOBILIARIO — Hoja de estilos del sitio público
   -----------------------------------------------------------------------
   Identidad visual: paleta inspirada en la cordillera de los Andes
   (azul pizarra) y la arquitectura en tierra/adobe (terracota), sobre
   un fondo piedra cálido. Serif editorial para titulares, sans para
   texto, monoespaciada para datos (precios, m², specs).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
    /* Paleta - Luminosidad y Frescura */
    --ink:            #1A283B;
    --ink-soft:       #506680;
    --paper:          #F4F7F9;
    --paper-elevated: #FFFFFF;
    
    /* Reemplazo de los tonos piedra cálidos por grises azulados fríos */
    --stone-200:      #E1E7EF;
    --stone-300:      #C2D0E0;
    
    /* Acentos - Extraídos del logo */
    --accent-blue:      #1A3673;
    --accent-blue-dark: #11244C;
    --accent-clay:      #DD6B20;
    --accent-clay-dark: #B85617;
    
    /* Estados - Más vibrantes para encajar con el nuevo estilo */
    --danger:  #E53E3E;
    --success: #38A169;

    /* Tipografía */
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

    /* Otros (Sombras actualizadas al nuevo tono --ink RGB: 26, 40, 59) */
    --radius-sm: 4px;
    --radius-md: 10px;
    --shadow-card: 0 1px 2px rgba(26,40,59,.06), 0 6px 20px rgba(26,40,59,.08);
    --shadow-card-hover: 0 2px 4px rgba(26,40,59,.08), 0 14px 32px rgba(26,40,59,.14);
    --max-width: 1180px;
}

/* --------------------------- Reset básico --------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 .5em;
    color: var(--ink);
}
h1 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 500; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.contenedor {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}
.dato-numerico { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.01em; }

/* ------------------------------ Header ------------------------------ */
/* ------------------------------ Header ------------------------------ */
.sitio-header {
    background: var(--paper);
    border-bottom: 1px solid var(--stone-300);
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(6px);
    background: rgba(244, 247, 249, 0.92);
    height: 90px; /* 1. Altura compacta para evitar el "header gigantesco" */
    overflow: hidden; /* 2. LA MAGIA: Oculta la parte transparente sobrante de los 160px para que no cruce la línea */
}
.sitio-header__interior {
    display: flex;
    align-items: center; /* 3. Alineación central estricta para igualar el logo con los botones */
    justify-content: space-between;
    padding: 0 24px; /* 4. Relleno vertical en 0 para mantener el control de la altura */
    height: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}
.marca {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Eliminamos alineaciones forzadas aquí para que el contenedor interior haga el trabajo */
}
.marca__logo {
    height: 160px; /* 5. TUS PARÁMETROS INTACTOS */
    width: auto;
    max-width: 390px;
    object-fit: contain;
    display: block;
}
@media (max-width: 760px) {
    .marca__logo { height: 54px; max-width: 220px; }
}
.marca__punto { color: var(--accent-clay); }
.nav-principal { display: flex; gap: 28px; align-items: center; }
.nav-principal a {
    font-size: .92rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: color .15s ease;
}
.nav-principal a:hover { color: var(--accent-blue); }
.nav-principal a.activo { color: var(--ink); }
.btn-nav-admin {
    border: 1px solid var(--stone-300);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: .85rem;
}
.btn-nav-admin:hover { border-color: var(--accent-blue); color: var(--accent-blue); }

/* ------------------------------- Hero -------------------------------- */
.hero {
    position: relative;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.hero__contenido {
    position: relative;
    z-index: 1;
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: 76px 24px 64px;
    text-align: center;
}
.hero__kicker {
    font-family: var(--font-mono);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--accent-clay-dark);
    margin-bottom: 14px;
    display: inline-block;
}
.hero p.hero__lead {
    font-size: 1.1rem;
    color: var(--ink-soft);
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
}
.hero__cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; justify-content: center; }

/* --------------------- Hero con carrusel de fondo --------------------- */
.hero--con-fondo { background: var(--ink); }
.hero__fondo { position: absolute; inset: 0; z-index: 0; background: var(--ink); }
.hero__fondo-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.8s ease;
}
.hero__fondo-slide.activa { opacity: 1; }
.hero__fondo-filtro {
    position: absolute;
    inset: 0;
    background: rgba(26,40,59,.55);
}
.hero--con-fondo .hero__contenido .hero__kicker { color: #F3C99A; }
.hero--con-fondo .hero__contenido h1 { color: #fff; }
.hero--con-fondo .hero__contenido p.hero__lead { color: rgba(255,255,255,.88); }
.hero--con-fondo .hero__contenido .btn-fantasma { border-color: rgba(255,255,255,.4); color: #fff; }
.hero--con-fondo .hero__contenido .btn-fantasma:hover { border-color: #fff; }
@media (max-width: 760px) {
    .hero__contenido { padding-top: 48px; }
}

/* ------------------------------ Botones ------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .92rem;
    border: 1px solid transparent;
    transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, color .15s ease;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--ink); color: var(--paper); }
.btn-primario:hover { background: var(--accent-blue-dark); }
.btn-clay { background: var(--accent-clay); color: #fff; }
.btn-clay:hover { background: var(--accent-clay-dark); }
.btn-fantasma { background: transparent; border-color: var(--stone-300); color: var(--ink); }
.btn-fantasma:hover { border-color: var(--ink); }
.btn-bloque { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* --------------------------- Filtros galería --------------------------- */
.filtros {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.filtros select, .filtros input {
    font-family: var(--font-body);
    font-size: .9rem;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--stone-300);
    background: var(--paper-elevated);
    color: var(--ink);
}
.filtros__limpiar {
    font-size: .85rem;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.filtros__contador {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--ink-soft);
}

/* --------------------------- Galería Masonry --------------------------- */
.galeria-masonry {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px 80px;
    column-count: 3;
    column-gap: 22px;
}
@media (max-width: 980px) { .galeria-masonry { column-count: 2; } }
@media (max-width: 640px) { .galeria-masonry { column-count: 1; } }

.tarjeta-propiedad {
    break-inside: avoid;
    margin-bottom: 22px;
    position: relative;
    aspect-ratio: 4/5;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s ease, transform .2s ease;
    display: block;
}
.tarjeta-propiedad:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.tarjeta-propiedad__img-wrap { position: absolute; inset: 0; background: var(--stone-200); }
.tarjeta-propiedad__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tarjeta-propiedad__img-wrap::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(26,40,59,0) 38%, rgba(26,40,59,.55) 72%, rgba(26,40,59,.88) 100%);
}
.tarjeta-propiedad__badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: rgba(26,40,59,.82); color: #fff;
    font-family: var(--font-mono); font-size: .72rem;
    padding: 4px 10px; border-radius: 999px;
    text-transform: capitalize;
}
.tarjeta-propiedad__cuerpo {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 18px 20px 20px;
}
.tarjeta-propiedad__precio {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 4px;
}
.tarjeta-propiedad__titulo {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: #fff;
    margin-bottom: 6px;
}
.tarjeta-propiedad__comuna {
    font-size: .85rem;
    color: rgba(255,255,255,.82);
    margin-bottom: 10px;
}
.tarjeta-propiedad__specs {
    display: flex;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: .78rem;
    color: rgba(255,255,255,.82);
    border-top: 1px solid rgba(255,255,255,.25);
    padding-top: 12px;
}

.galeria-vacia {
    text-align: center;
    padding: 80px 24px;
    color: var(--ink-soft);
}

/* ------------------------------ Sección genérica ------------------------------ */
.seccion { padding: 64px 24px; }
.seccion--alterna { background: var(--stone-200); }
.seccion__interior { max-width: var(--max-width); margin: 0 auto; }
.seccion__cabecera { max-width: 60ch; margin-bottom: 40px; }

.grilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 860px) { .grilla-3 { grid-template-columns: 1fr; } }
.tarjeta-simple {
    background: var(--paper-elevated);
    padding: 28px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.tarjeta-simple__icono {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--accent-blue);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    font-family: var(--font-mono);
}

/* ------------------------------ Ficha de propiedad ------------------------------ */
.ficha-propiedad { padding: 40px 24px 80px; max-width: var(--max-width); margin: 0 auto; }
.ficha-propiedad__volver {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .88rem; color: var(--ink-soft);
    margin-bottom: 24px;
}
.ficha-propiedad__volver:hover { color: var(--accent-blue); }

/* ------------------------------ Grid de fotos ------------------------------ */
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin-top: 14px;
}
.galeria-grid__item {
    border: none;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--stone-200);
    cursor: pointer;
    transition: opacity .15s ease;
}
.galeria-grid__item:hover { opacity: .8; }
.galeria-grid__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------ Lightbox (modal con el carrusel) ------------------------------ */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(26, 40, 59, .94);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
}
.lightbox.abierto { display: flex; }
.lightbox__cerrar {
    position: absolute;
    top: 20px;
    right: 24px;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    z-index: 2;
}
.lightbox__cerrar:hover { background: rgba(255,255,255,.22); }
.carrusel--lightbox { width: 100%; max-width: 960px; }
.carrusel--lightbox .carrusel__viewport { aspect-ratio: 16/10; max-height: 76vh; background: transparent; }
.carrusel--lightbox .carrusel__slide img { object-fit: contain; }
.carrusel--lightbox .carrusel__miniaturas { justify-content: center; }
.carrusel__viewport {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--stone-200);
    aspect-ratio: 16/9;
    max-height: 560px;
}
.carrusel__pista {
    display: flex;
    height: 100%;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.carrusel__slide {
    flex: 0 0 100%;
    height: 100%;
}
.carrusel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carrusel__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    border: none;
    font-size: 1.1rem;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.carrusel__flecha:hover { background: #fff; }
.carrusel__flecha--prev { left: 16px; }
.carrusel__flecha--next { right: 16px; }
.carrusel__contador {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: rgba(26,40,59,.75);
    color: #fff;
    font-family: var(--font-mono);
    font-size: .78rem;
    padding: 4px 11px;
    border-radius: 999px;
}
.carrusel__miniaturas {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
}
.carrusel__miniatura {
    flex: 0 0 auto;
    width: 76px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: none;
    opacity: .6;
    transition: opacity .15s ease, border-color .15s ease;
}
.carrusel__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.carrusel__miniatura:hover { opacity: .85; }
.carrusel__miniatura.activa { opacity: 1; border-color: var(--accent-blue); }

@media (max-width: 760px) {
    .carrusel__viewport { aspect-ratio: 4/3; max-height: none; }
    .carrusel__flecha { width: 36px; height: 36px; }
}

.ficha-propiedad__layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 48px;
    align-items: start;
}
@media (max-width: 860px) { .ficha-propiedad__layout { grid-template-columns: 1fr; } }

.ficha-propiedad__specs {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding: 20px 0;
    margin: 20px 0;
    border-top: 1px solid var(--stone-300);
    border-bottom: 1px solid var(--stone-300);
}
.spec-item { }
.spec-item__valor { font-family: var(--font-mono); font-size: 1.1rem; display: block; }
.spec-item__label { font-size: .78rem; color: var(--ink-soft); }

.panel-lateral {
    background: var(--paper-elevated);
    border-radius: var(--radius-md);
    padding: 28px;
    box-shadow: var(--shadow-card);
    position: sticky;
    top: 100px;
}
.panel-lateral__precio {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    color: var(--accent-blue-dark);
    margin-bottom: 4px;
}
.panel-lateral hr { border: none; border-top: 1px solid var(--stone-200); margin: 20px 0; }

/* ------------------------------ Formularios ------------------------------ */
.campo { margin-bottom: 18px; }
.campo label {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--ink-soft);
}
.campo input, .campo select, .campo textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: .95rem;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid var(--stone-300);
    background: var(--paper-elevated);
    color: var(--ink);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(26,54,115,.15);
}
.campo textarea { resize: vertical; min-height: 110px; }
.campo__error {
    color: var(--danger);
    font-size: .8rem;
    margin-top: 5px;
    display: none;
}
.campo.con-error input, .campo.con-error textarea, .campo.con-error select { border-color: var(--danger); }
.campo.con-error .campo__error { display: block; }

.alerta {
    padding: 14px 18px;
    border-radius: 8px;
    font-size: .9rem;
    margin-bottom: 18px;
    display: none;
}
.alerta.visible { display: block; }
.alerta--exito { background: #E6F2ED; color: var(--success); }
.alerta--error { background: #FDE8E8; color: var(--danger); }

/* ------------------------------ Footer ------------------------------ */
.sitio-footer {
    background: var(--ink);
    color: var(--stone-200);
    padding: 56px 24px 28px;
}
.sitio-footer__interior {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 32px;
}
@media (max-width: 700px) { .sitio-footer__interior { grid-template-columns: 1fr; } }
.sitio-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.sitio-footer a { color: var(--stone-300); font-size: .9rem; line-height: 2; }
.sitio-footer a:hover { color: #fff; }
.sitio-footer__base {
    max-width: var(--max-width);
    margin: 40px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: .78rem;
    color: var(--stone-300);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* ------------------------------ Página legal ------------------------------ */
.pagina-legal {
    max-width: 74ch;
    margin: 0 auto;
    padding: 56px 24px 90px;
}
.pagina-legal h2 { margin-top: 1.6em; }
.pagina-legal p, .pagina-legal li { color: var(--ink-soft); }
.pagina-legal li { margin-bottom: .4em; }

/* ------------------------------ Banner vista previa ------------------------------ */
.banner-vista-previa {
    background: var(--accent-clay);
    color: #fff;
    padding: 12px 24px;
    text-align: center;
    font-size: .88rem;
}

/* ------------------------------ Mantenimiento ------------------------------ */
.pagina-mantenimiento {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}
.pagina-mantenimiento__caja { max-width: 480px; }
.pagina-mantenimiento__icono {
    width: 64px; height: 64px; margin: 0 auto 24px;
    background: var(--accent-clay);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: var(--font-mono); font-size: 1.4rem;
}

/* ------------------------------ Utilidades ------------------------------ */
.texto-centro { text-align: center; }
.solo-mobile { display: none; }
@media (max-width: 760px) {
    .nav-principal { display: none; }
}