/* ===========================================================================
   Tema "Site Web Professional" (familia 8)
   ---------------------------------------------------------------------------
   Cuarto diseño propio (8/9/2026). Sale de una guía de estructura de portal
   inmobiliario grande: barra de anuncio arriba, cabecera con buscador, portada
   con "omnibox" —solapas de operación, tipo, ubicación y rango de precio— con
   fichas de filtros rápidos debajo, una grilla tipo bento con los números
   REALES de la web, y el listado de propiedades con etiquetas de estado.

   OJO, esto es a propósito y no se cambia sin pensarlo: acá NO va ninguna
   marca ajena. Nada de nombres, logos, isotipos, sellos ni menciones de la
   plataforma que inspiró la estructura, ni de asociaciones profesionales de
   otro país. Se copia la ARQUITECTURA de la pantalla, que es lo útil; los
   textos son propios y salen del idioma del sitio.

   Tampoco hay datos inventados: la guía traía cifras de ejemplo (días en el
   mercado, variación de inventario, cuota hipotecaria). Acá los números salen
   de las propiedades de la inmobiliaria (ResumenDeLaWeb y las estadísticas de
   la portada) o el bloque no se dibuja. Una web inmobiliaria no puede mostrar
   un número que no es cierto.

   Comparte con Nova (familia 5) las páginas internas: listado, ficha,
   contacto, equipo y páginas del customizador usan las clases .nv-* y acá se
   visten con esta paleta. Lo propio lleva prefijo .pf-. El body lleva las dos
   clases: "nv pf".
   =========================================================================== */

:root {
    /* Paleta por omisión: carmín, carbón y blanco. */
    --pf-primary: #d92228;
    --pf-primary-hover: #b51a20;
    --pf-secondary: #2b2b2b;
    --pf-accent: #0056b3;
    --pf-accent-hover: #004085;
    --pf-background: #f7f7f8;
    --pf-surface: #ffffff;
    --pf-surface-alt: #f0f2f5;
    --pf-text-main: #1e1e1e;
    --pf-text-muted: #595959;
    --pf-border: #e2e4e8;
    --pf-badge-bg: #fff1f2;

    /* Lo que esperan las páginas internas compartidas con Nova. */
    --acento: var(--pf-primary);
    --acento-claro: var(--pf-primary-hover);
    --acento-texto: #ffffff;
    --tinta: var(--pf-secondary);
    --tinta-2: var(--pf-secondary);
    --gris-borde: var(--pf-border);
    --gris-suave: var(--pf-background);
    --gris-texto: var(--pf-text-muted);
    --gris-fuerte: var(--pf-text-main);
    --papel: var(--pf-surface);
}

.pf * { box-sizing: border-box; }
.pf {
    margin: 0;
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--pf-text-main);
    background: var(--pf-background);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.pf img { max-width: 100%; display: block; }
.pf a { color: inherit; text-decoration: none; }
.pf-contenedor, .pf .nv-contenedor { max-width: 1240px; margin: 0 auto; padding: 0 22px; }

/* ------------------------------------------------- barra de anuncio y menú */
.pf-anuncio {
    background: var(--pf-secondary); color: #fff;
    font-size: 13.5px; text-align: center; padding: 9px 16px;
}
.pf-anuncio a { text-decoration: underline; }
.pf-top { background: var(--pf-surface); border-bottom: 1px solid var(--pf-border); position: sticky; top: 0; z-index: 60; }
.pf-top .pf-contenedor { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.pf-marca { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.pf-marca img { max-height: 50px; width: auto; }
.pf-marca span { font-weight: 800; font-size: 19px; color: var(--pf-secondary); }
.pf-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.pf .pf-link {
    color: var(--pf-text-main); font-weight: 600; font-size: 15px;
    padding: 10px 14px; border-radius: 8px; white-space: nowrap;
}
.pf .pf-link:hover, .pf .pf-link.pf-activo { background: var(--pf-surface-alt); color: var(--pf-primary); }
.pf-menu-boton {
    display: none; background: none; border: 0; color: var(--pf-secondary);
    font-size: 26px; line-height: 1; padding: 10px 6px; cursor: pointer;
}
.pf-redes { display: flex; gap: 4px; align-items: center; }
.pf .pf-redes a {
    color: var(--pf-text-muted); width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.pf .pf-redes a:hover { background: var(--pf-surface-alt); color: var(--pf-primary); }

/* ------------------------------------------------------- portada y omnibox */
.pf-hero { position: relative; background: var(--pf-secondary); color: #fff; }
.pf-hero-fotos { position: absolute; inset: 0; overflow: hidden; }
.pf-hero-fotos > div {
    position: absolute; inset: 0; background: center/cover no-repeat;
    opacity: 0; transition: opacity 1.2s ease;
}
.pf-hero-fotos > div.pf-visible { opacity: 1; }
.pf-hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,20,22,.62) 0%, rgba(20,20,22,.72) 100%);
}
.pf-hero-texto { position: relative; z-index: 2; padding: 96px 0 104px; text-align: center; }
.pf-hero h1 {
    font-size: 54px; line-height: 1.08; margin: 0 0 14px; font-weight: 800;
    letter-spacing: -.02em; text-shadow: 0 3px 20px rgba(0,0,0,.35);
}
.pf-hero p.pf-bajada { font-size: 18px; margin: 0 auto 32px; max-width: 760px; color: #e9eaee; }

/* Omnibox: solapas pegadas a una tarjeta blanca con los campos en fila. */
.pf-omnibox { max-width: 1000px; margin: 0 auto; text-align: left; }
.pf-solapas { display: flex; gap: 3px; }
.pf-solapa {
    background: rgba(255,255,255,.82); color: var(--pf-text-main); border: 0;
    padding: 12px 26px; border-radius: 12px 12px 0 0; font-family: inherit;
    font-size: 14.5px; font-weight: 700; cursor: pointer;
}
.pf-solapa.pf-activa { background: #fff; color: var(--pf-primary); }
.pf-omnibox form {
    background: #fff; border-radius: 0 14px 14px 14px; padding: 16px;
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    box-shadow: 0 22px 50px rgba(0,0,0,.3);
}
.pf-campo { flex: 1 1 230px; min-width: 0; }
.pf-campo-chico { flex: 0 1 145px; }
/* El desplegable de tipo necesita más que un campo de precio: con 145 px el
   texto de la opción quedaba cortado. */
.pf-campo-tipo { flex: 0 1 205px; }
.pf-omnibox input, .pf-omnibox select {
    width: 100%; height: 50px; border: 1px solid var(--pf-border);
    border-radius: 10px; padding: 0 14px; font-size: 15px; font-family: inherit;
    color: var(--pf-text-main); background: #fff;
}
.pf .pf-boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 50px; padding: 0 30px; border: 0; border-radius: 10px;
    background: var(--pf-primary); color: #fff; font-size: 15.5px; font-weight: 700;
    font-family: inherit; cursor: pointer; white-space: nowrap;
}
.pf .pf-boton:hover { background: var(--pf-primary-hover); color: #fff; }
.pf .pf-boton-borde {
    background: transparent; border: 1px solid var(--pf-border); color: var(--pf-text-main);
}
.pf .pf-boton-borde:hover { background: var(--pf-surface-alt); color: var(--pf-text-main); }
.pf .pf-boton svg { width: 18px; height: 18px; }

/* Fichas de filtro rápido, debajo del buscador. */
.pf-fichas-rapidas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
.pf .pf-ficha-rapida {
    background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.34);
    padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
}
.pf .pf-ficha-rapida:hover { background: #fff; color: var(--pf-text-main); }

/* ----------------------------------------------------------- grilla bento */
.pf-seccion { padding: 66px 0; }
.pf-seccion.pf-alt { background: var(--pf-surface-alt); }
.pf-titulo { margin-bottom: 34px; }
.pf-titulo h2 { font-size: 32px; margin: 0 0 8px; font-weight: 800; letter-spacing: -.015em; color: var(--pf-secondary); }
.pf-titulo p { margin: 0; color: var(--pf-text-muted); font-size: 16px; }
.pf-centro { text-align: center; margin-top: 36px; }

.pf-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pf-bloque {
    background: var(--pf-surface); border: 1px solid var(--pf-border);
    border-radius: 16px; padding: 26px;
}
.pf-bloque.pf-ancho { grid-column: span 2; }
.pf-bloque h3 { margin: 0 0 6px; font-size: 18px; color: var(--pf-secondary); font-weight: 700; }
.pf-bloque p { margin: 0 0 18px; color: var(--pf-text-muted); font-size: 14.5px; }
.pf-numeros { display: flex; flex-wrap: wrap; gap: 26px; }
.pf-numero strong {
    display: block; font-size: 34px; line-height: 1.1; font-weight: 800;
    color: var(--pf-primary); letter-spacing: -.02em;
}
.pf-numero span { font-size: 13.5px; color: var(--pf-text-muted); }
.pf-etiqueta-suave {
    display: inline-block; background: var(--pf-badge-bg); color: var(--pf-primary);
    border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 700;
    margin-bottom: 12px; text-transform: uppercase; letter-spacing: .04em;
}
.pf-lista-enlaces { display: flex; flex-wrap: wrap; gap: 8px; }
.pf .pf-lista-enlaces a {
    border: 1px solid var(--pf-border); border-radius: 999px;
    padding: 7px 14px; font-size: 14px; color: var(--pf-text-main);
}
.pf .pf-lista-enlaces a:hover { border-color: var(--pf-primary); color: var(--pf-primary); }

/* ------------------------------------------- tarjetas de propiedad (Nova) */
.pf .nv-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pf .nv-tarjeta {
    background: var(--pf-surface); border: 1px solid var(--pf-border);
    border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
}
.pf .nv-tarjeta:hover { box-shadow: 0 18px 36px rgba(20,20,22,.14); transform: translateY(-4px); }
/* Ver el comentario de .nv-foto en theme_5/css/nova.css: la imagen va absoluta
   para que mande el recorte 4:3 y todas las tarjetas de la fila midan igual. */
.pf .nv-foto { position: relative; aspect-ratio: 4 / 3; background: var(--pf-surface-alt); overflow: hidden; flex: 0 0 auto; min-height: 0; }
.pf .nv-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* z-index: ver el comentario de .nv-etiquetas en theme_5/css/nova.css. */
.pf .nv-etiquetas { position: absolute; z-index: 2; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.pf .nv-etiqueta {
    background: var(--pf-primary); color: #fff; font-size: 11.5px; font-weight: 800;
    padding: 6px 12px; border-radius: 6px; text-transform: uppercase; letter-spacing: .05em;
}
.pf .nv-etiqueta.nv-gris-etq { background: var(--pf-secondary); }
.pf .nv-precio-foto { display: none; }
.pf .nv-cuerpo { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.pf .nv-cuerpo h3 { font-size: 16px; margin: 0 0 6px; color: var(--pf-text-main); font-weight: 700; order: 2; }
.pf .nv-lugar { color: var(--pf-text-muted); font-size: 14px; display: flex; align-items: center; gap: 6px; margin-bottom: 14px; order: 3; }
.pf .nv-lugar svg { width: 15px; height: 15px; flex: 0 0 auto; }
.pf .nv-medidas {
    margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--pf-border);
    display: flex; gap: 18px; color: var(--pf-text-muted); font-size: 14px; list-style: none; order: 4;
}
.pf .nv-medidas li { display: flex; align-items: center; gap: 6px; }
.pf .nv-medidas svg { width: 16px; height: 16px; }

.pf .nv-fichas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pf .nv-ficha {
    background: var(--pf-surface); border: 1px solid var(--pf-border);
    border-radius: 14px; padding: 24px 18px; text-align: center;
}
.pf .nv-ficha:hover { border-color: var(--pf-primary); }
.pf .nv-ficha .nv-icono {
    width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 14px;
    background: var(--pf-badge-bg); color: var(--pf-primary);
    display: flex; align-items: center; justify-content: center;
}
.pf .nv-ficha .nv-icono svg { width: 26px; height: 26px; }
.pf .nv-ficha h3 { margin: 0 0 4px; font-size: 15.5px; color: var(--pf-text-main); }
.pf .nv-ficha span { color: var(--pf-text-muted); font-size: 13.5px; }

/* ------------------------------------------------- páginas internas (Nova) */
.pf .nv-encabezado { background: var(--pf-secondary); color: #fff; padding: 52px 0; }
.pf .nv-encabezado h1 { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -.015em; }
.pf .nv-encabezado p { margin: 8px 0 0; color: #d8d9de; }
.pf .nv-seccion { padding: 58px 0; }
.pf .nv-seccion.nv-gris { background: var(--pf-surface-alt); }
.pf .nv-caja {
    background: var(--pf-surface); border: 1px solid var(--pf-border);
    border-radius: 16px; padding: 24px; margin-bottom: 24px;
}
.pf .nv-caja h2, .pf .nv-caja h3 { margin-top: 0; color: var(--pf-secondary); }
.pf .nv-titulo h2 { color: var(--pf-secondary); font-weight: 800; }
.pf .nv-boton { background: var(--pf-primary); color: #fff; border-radius: 10px; font-weight: 700; }
.pf .nv-boton:hover { background: var(--pf-primary-hover); color: #fff; }
.pf .nv-boton-borde { background: transparent; border: 1px solid var(--pf-border); color: var(--pf-text-main); }
.pf .nv-boton-borde:hover { background: var(--pf-surface-alt); color: var(--pf-text-main); }
.pf .nv-formulario input, .pf .nv-formulario select, .pf .nv-formulario textarea { border-radius: 10px; border-color: var(--pf-border); }
.pf .nv-paginado li.active span { background: var(--pf-primary); border-color: var(--pf-primary); }
.pf .nv-caracteristicas li::before { color: var(--pf-primary); }
.pf .nv-miniaturas img.nv-activa, .pf .nv-miniaturas img:hover { border-color: var(--pf-primary); }

/* ------------------------------------------------------------------- pie */
.pf-pie { background: var(--pf-secondary); color: #c9cbd1; padding: 58px 0 0; }
.pf-pie h3 { color: #fff; font-size: 15px; margin: 0 0 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pf .pf-pie a:hover { color: #fff; text-decoration: underline; }
.pf-pie-grilla { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 30px; }
.pf-pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; font-size: 14.5px; }
.pf-pie ul li { display: flex; gap: 8px; align-items: flex-start; }
.pf-pie ul svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; }
.pf-pie-logo { max-height: 54px; width: auto; margin-bottom: 15px; filter: brightness(0) invert(1); }
.pf-pie-redes { display: flex; gap: 8px; margin-top: 14px; }
.pf .pf-pie-redes a {
    width: 36px; height: 36px; border-radius: 8px; color: #fff;
    background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center;
}
.pf .pf-pie-redes a:hover { background: var(--pf-primary); }
.pf-pie-abajo {
    margin-top: 42px; border-top: 1px solid rgba(255,255,255,.14); padding: 18px 0;
    font-size: 13.5px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

.pf .nv-whatsapp {
    position: fixed; right: 20px; bottom: 20px; z-index: 90;
    width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.pf .nv-whatsapp svg { width: 30px; height: 30px; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
    .pf .nv-grilla { grid-template-columns: repeat(2, 1fr); }
    .pf .nv-fichas { grid-template-columns: repeat(3, 1fr); }
    .pf-bento { grid-template-columns: 1fr 1fr; }
    .pf-bloque.pf-ancho { grid-column: span 2; }
    .pf-pie-grilla { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .pf-hero h1 { font-size: 34px; }
    .pf-hero-texto { padding: 60px 0 66px; }
    .pf .nv-grilla, .pf .nv-fichas, .pf-bento { grid-template-columns: 1fr; }
    .pf-bloque.pf-ancho { grid-column: span 1; }
    .pf-pie-grilla { grid-template-columns: 1fr; }
    .pf-menu-boton { display: block; }
    .pf-top .pf-contenedor { flex-wrap: wrap; min-height: 64px; }
    .pf-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 10px; }
    .pf-nav.pf-abierto { display: flex; }
    .pf-campo, .pf-campo-chico { flex: 1 1 100%; }
    .pf .pf-boton { width: 100%; }
    .pf-omnibox form { border-radius: 14px; }
    .pf-solapas { flex-wrap: wrap; }
}