/*
Theme Name: PAX MARKA
Theme URI: https://paxmarka.com
Description: Portal inmobiliario PAX MARKA — La Paz, Bolivia
Author: PAX MARKA
Author URI: https://paxmarka.com
Template: twentytwentyfive
Version: 1.0.0
Text Domain: paxmarka
*/

/* =============================================
   VARIABLES DE MARCA
   ============================================= */
/* Paleta oficial PAX MARKA — son los ÚNICOS colores de marca:
     teja #9E2B2B · hueso #F3F2EE · gris #C3C4BF · carbón #1C1C1C · arena #E4D9C8
   Todo lo demás de acá abajo es un tono derivado: mezcla de esos cinco entre sí
   (o con negro/blanco puros). No agregar colores nuevos fuera de esa regla. */
:root {
  /* — Marca — */
  --pp-carbon:      #1C1C1C;
  --pp-hueso:       #F3F2EE;
  --pp-teja:        #9E2B2B;
  --pp-arena:       #E4D9C8;
  --pp-gris-marca:  #C3C4BF;

  /* Nombres históricos (los usa todo el CSS); apuntan a la paleta de arriba */
  --pp-azul:        #1C1C1C;   /* carbón: tipografía y superficies oscuras */
  --pp-azul-oscuro: #0f0f0f;   /* tono: carbón oscurecido */
  --pp-turquesa:    #9E2B2B;   /* teja: acento primario (botones, enlaces) */
  --pp-amarillo:    #E4D9C8;   /* arena: realce cálido */
  --pp-azul-claro:  #EEE9E1;   /* tono: arena 35% sobre hueso */

  /* — Texto — (tonos de carbón sobre hueso) */
  --pp-texto:       #1C1C1C;
  --pp-texto-2:     #5D5D5C;   /* carbón 70% */
  --pp-texto-3:     #888785;   /* carbón 50% */
  --pp-gris-texto:  #676765;   /* carbón 65% */

  /* — Fondos y bordes — (tonos de gris sobre hueso) */
  --pp-gris:        #F3F2EE;   /* hueso: fondo principal */
  --pp-gris-borde:  #DBDBD7;   /* gris 50% */
  --pp-separador:   #E7E7E2;   /* gris 25% */
  --pp-img-bg:      #E7E7E2;
  --pp-blanco:      #ffffff;

  /* — Sombras y radios — */
  --pp-sombra:      0 2px 12px rgba(28,28,28,0.12);
  --pp-radio:       10px;
  --pp-radio-lg:    16px;

  /* — Tipografía — */
  --pp-fuente:      'Inter', system-ui, -apple-system, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-display:   'Montserrat', sans-serif;

  /* — Operaciones — */
  --pp-op-venta:           #2F5D5B;
  --pp-op-venta-rgb:       47, 93, 91;
  --pp-op-alquiler:        #5A6B3D;
  --pp-op-alquiler-rgb:    90, 107, 61;
  --pp-op-anticretico:     #8A5E22;
  --pp-op-anticretico-rgb: 138, 94, 34;
  --pp-op-roomie:          #7C3AED;
  --pp-op-roomie-rgb:      124, 58, 237;
}

/* =============================================
   RESET Y BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: clip;
  max-width: 100%;
}

body {
  font-family: var(--pp-fuente);
  color: var(--pp-texto);
  background: var(--pp-gris);
  margin: 0;
  padding: 0;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* =============================================
   ARCVITA — NAVBAR
   ============================================= */

.pp-navbar {
  background: var(--pp-turquesa);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 14px rgba(28,28,28,0.18);
}

.pp-navbar-inner {
  width: 100%;
  padding: 0 clamp(1.5rem, 4vw, 5rem);
  height: 70px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

/* Logo */
.av-logo { display: flex; align-items: center; text-decoration: none; }

/* Logo CSS — no se usa (reemplazado por imagen SVG) */
/*.av-logo-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.av-logo-main {
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: 100%;
}

.av-logo-arc {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #FFFFFF;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.av-logo-vita {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: var(--pp-turquesa);
  letter-spacing: 4px;
  text-transform: uppercase;
}

.av-logo-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}

.av-logo-line {
  display: block;
  flex: 1;
  height: 1px;
  background: var(--pp-turquesa);
}

.av-logo-espacios {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 9px;
  color: #FFFFFF;
  letter-spacing: 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.av-logo-tagline {
  display: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size: 8px;
  color: #DBDBD7;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  margin-top: 2px;
}
*/

/* Left nav */
.pp-navbar-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
}

.pp-navbar-left a {
  color: var(--pp-amarillo);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.3px;
  transition: color 0.15s;
  text-decoration: none;
}
.pp-navbar-left a:hover { color: #fff; }

.pp-navbar-link {
  color: var(--pp-amarillo);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s;
}
.pp-navbar-link:hover { color: #fff; }

/* Right zone */
.pp-navbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

/* CTA button */
.pp-navbar-cta {
  background: var(--pp-amarillo);
  color: var(--pp-turquesa) !important;
  padding: 8px 16px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s;
  white-space: nowrap;
}
.pp-navbar-cta:hover { background: #CDC3B4; color: var(--pp-turquesa) !important; }
.pp-navbar-cta--secondary {
  background: transparent;
  color: var(--pp-texto-2) !important;
  border: 1px solid var(--pp-gris-borde);
}
.pp-navbar-cta--secondary:hover { background: var(--pp-gris-fondo); color: var(--pp-azul) !important; }

/* Login button */
.pp-navbar-login {
  color: var(--pp-amarillo);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 6px;
  transition: all 0.15s;
  white-space: nowrap;
}
.pp-navbar-login:hover {
  color: #fff;
  border-color: #fff;
}

/* Mobile menu background */
#pp-mobile-menu {
  background: var(--pp-azul) !important;
}

/* Mobile — ocultar links y botones, mostrar toggle */
@media (max-width: 768px) {
  .pp-navbar-left  { display: none; }
  .pp-navbar-right { display: none; }
  .pp-navbar-toggle { display: flex; }
  .pp-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    position: relative;
  }
  .av-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
  }
}

/* Mobile menu — dropdown anclado a la navbar (es hijo suyo en header.php).
   Con position:fixed quedaba a 70px del borde de la ventana e ignoraba el
   empujón de 46px de la barra de administración de WordPress: la navbar le
   tapaba "Inicio" al iniciar sesión. */
.pp-mobile-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 1rem;
  min-width: 200px;
  max-width: 280px;
  background: var(--pp-azul);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  z-index: 999;
  padding: 1.25rem 1.25rem;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform-origin: top left;
}
.pp-mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* Animación de las tres barras → X */
.pp-navbar-toggle.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.pp-navbar-toggle.is-active span:nth-child(2) { opacity: 0; }
.pp-navbar-toggle.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.pp-navbar-toggle span { transition: transform 0.2s ease, opacity 0.2s ease; }

/* ── User menu / dropdown ── */
.pp-user-menu { position: relative; list-style: none; }

.pp-user-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pp-amarillo);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 0.15s;
  font-family: inherit;
}
.pp-user-btn:hover { background: rgba(255,255,255,0.14); }

.pp-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pp-azul);
  color: var(--pp-amarillo);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pp-user-name {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp-user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.14);
  min-width: 185px;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  z-index: 1000;
}
.pp-user-dropdown.open { display: block; }
.pp-user-dropdown li a {
  display: block;
  padding: 9px 16px;
  color: var(--pp-texto) !important;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.1s;
  white-space: nowrap;
}
.pp-user-dropdown li a:hover {
  background: var(--pp-gris);
  color: var(--pp-azul) !important;
}
.pp-user-dropdown-logout a {
  color: #dc2626 !important;
  border-top: 1px solid var(--pp-separador);
  margin-top: 4px;
  padding-top: 10px !important;
}
.pp-user-dropdown-logout a:hover { background: #fef2f2 !important; }

/* ── Menú "Revisión" (navbar escritorio) ── */
.pp-rev-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.80);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  padding: 0;
  transition: color 0.15s;
}
.pp-rev-btn:hover { color: #FFFFFF; }
.pp-rev-dropdown { left: 0; right: auto; }
.pp-rev-dropdown li a { display: flex; align-items: center; gap: 8px; }

.pp-navbar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.pp-navbar-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 4px 0;
  border-radius: 2px;
}

/* =============================================
   HERO
   ============================================= */
.pp-hero {
  background: var(--pp-azul);
  background: linear-gradient(135deg, var(--pp-azul) 0%, var(--pp-azul-oscuro) 60%, var(--pp-turquesa) 130%);
  background-size: cover;
  background-position: top center;
  padding: 4rem 1.5rem 4.5rem;
  overflow: hidden;
  position: relative;
}

.pp-hero.has-bg-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(28,28,28,0.88) 0%,
    rgba(28,28,28,0.72) 45%,
    rgba(28,28,28,0.22) 75%,
    rgba(28,28,28,0.00) 100%
  );
  pointer-events: none;
}

.pp-hero-inner {
  max-width: clamp(900px, 92vw, 1600px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 620px) 1fr;
  gap: 2rem;
  align-items: center;
}

.pp-hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pp-hero h1 {
  font-family: var(--font-display);
  color: white;
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.pp-hero h1 em {
  color: var(--pp-amarillo);
  font-style: normal;
}

.pp-hero-sub {
  color: var(--pp-gris);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.55;
  margin-bottom: 1.5rem;
  max-width: 520px;
}

.pp-hero-stats {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.pp-stat strong {
  display: block;
  color: var(--pp-amarillo);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.pp-stat span {
  color: rgba(255,255,255,0.65);
  font-size: 12px;
}

/* =============================================
   BUSCADOR HERO
   ============================================= */
.pp-search-box {
  background: var(--pp-gris);
  border-radius: var(--pp-radio-lg);
  padding: 1rem;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  width: 100%;
}

.pp-search-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.pp-search-tab {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--pp-gris-borde);
  background: white;
  color: var(--pp-texto-2);
  transition: all 0.15s;
}

.pp-search-tab:hover {
  border-color: var(--pp-turquesa);
  color: var(--pp-turquesa);
}

.pp-search-tab.active {
  background: var(--pp-turquesa);
  color: white;
  border-color: var(--pp-turquesa);
  font-weight: 700;
}

.pp-search-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}

.pp-search-field label {
  display: block;
  font-size: 11px;
  color: var(--pp-texto-3);
  font-weight: 500;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pp-search-field select,
.pp-search-field input {
  width: 100%;
  padding: 7px 12px;
  border: 1.5px solid var(--pp-gris-borde);
  border-radius: var(--pp-radio);
  font-size: 13px;
  color: var(--pp-texto-2);
  background: white;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

.pp-search-field select:focus,
.pp-search-field input:focus {
  outline: none;
  border-color: var(--pp-turquesa);
}

.pp-search-btn {
  background: var(--pp-amarillo);
  color: var(--pp-azul);
  border: none;
  padding: 11px 28px;
  border-radius: var(--pp-radio);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
  height: 44px;
}

.pp-search-btn:hover {
  opacity: 0.9;
}

.pp-search-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* =============================================
   CONTENIDO PRINCIPAL
   ============================================= */
.pp-main {
  max-width: clamp(900px, 92vw, 1600px);
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

.pp-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.pp-section-header h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--pp-azul);
}

.pp-section-header a {
  font-size: 13px;
  color: var(--pp-turquesa);
  font-weight: 500;
}

.pp-section-header a:hover {
  text-decoration: underline;
}

/* =============================================
   CHIPS DE CATEGORÍA
   ============================================= */
.pp-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.pp-chips-indicator {
  display: none;
  width: 60%;
  margin: 0 auto 1.5rem;
  gap: 4px;
}
.pp-chips-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(0,0,0,0.1);
  transition: background 0.18s ease;
}
.pp-chips-bar--active {
  background: var(--pp-azul);
}

.pp-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1.5px solid var(--pp-gris-borde);
  border-radius: 50px;
  font-size: 13px;
  color: var(--pp-texto-2);
  background: white;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.pp-chip:hover,
.pp-chip.active {
  border-color: var(--pp-turquesa);
  color: var(--pp-turquesa);
  background: var(--pp-azul-claro);
}

.pp-chip-count {
  background: var(--pp-azul);
  color: white;
  border-radius: 50px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
}

/* =============================================
   GRID DE PROPIEDADES
   ============================================= */
.pp-properties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.pp-card {
  background: white;
  border-radius: var(--pp-radio-lg);
  overflow: hidden;
  border: 1px solid var(--pp-gris-borde);
  box-shadow: var(--pp-sombra);
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
}

.pp-card > a {
  flex: 1;
  display: block;
}

.pp-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(12,71,94,0.15);
}

.pp-card-img-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--pp-img-bg);
  flex-shrink: 0;
}

.pp-card-no-img {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--pp-texto-3);
  background: linear-gradient(135deg, var(--pp-img-bg) 0%, color-mix(in srgb, var(--pp-img-bg) 85%, var(--pp-turquesa)) 100%);
}

.pp-card-no-img span {
  font-size: 12px;
  letter-spacing: 0.3px;
}

.pp-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.pp-card:hover .pp-card-img-wrap img {
  transform: scale(1.04);
}

.pp-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pp-badge-venta    { background: var(--pp-op-venta); color: var(--pp-blanco); }
.pp-badge-alquiler { background: var(--pp-op-alquiler); color: var(--pp-blanco); }
.pp-badge-anticretico { background: var(--pp-op-anticretico); color: var(--pp-blanco); }
.pp-badge-terreno  { background: var(--pp-amarillo); color: var(--pp-azul); }
.pp-badge-roomie   { background: var(--pp-op-roomie); color: var(--pp-blanco); }

.pp-card-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s;
}

.pp-card-fav:hover { background: white; }

.pp-card-body {
  padding: 14px 16px 10px;
}

.pp-card-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--pp-azul);
  margin-bottom: 4px;
}

.pp-card-price small {
  font-size: 13px;
  font-weight: 400;
  color: var(--pp-texto-3);
}

.pp-card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--pp-texto);
  margin-bottom: 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pp-card-location {
  font-size: 12px;
  color: var(--pp-texto-3);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}

.pp-card-location svg { flex-shrink: 0; }

.pp-card-features {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--pp-separador);
  border-bottom: 1px solid var(--pp-separador);
  flex-wrap: wrap;
}

.pp-feature {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--pp-gris-texto);
}

.pp-feature strong {
  color: var(--pp-texto-2);
  font-weight: 600;
}

.pp-card-footer {
  padding: 10px 16px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pp-card-agent {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--pp-texto-3);
}

.pp-agent-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pp-azul-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--pp-azul);
}

.pp-wa-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #25d366;
  color: white;
  border: none;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.pp-wa-btn:hover { background: #1ebe5d; color: white; }

/* =============================================
   BANNER ANTICRÉTICO
   ============================================= */
.pp-banner {
  background: var(--pp-azul);
  border-radius: var(--pp-radio-lg);
  padding: 2rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
}

.pp-banner h3 {
  color: white;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.pp-banner p {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  max-width: 400px;
}

.pp-banner-cta {
  background: var(--pp-amarillo);
  color: var(--pp-azul);
  padding: 10px 24px;
  border-radius: var(--pp-radio);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.pp-banner-cta:hover { opacity: 0.9; color: var(--pp-azul); }

/* =============================================
   PÁGINA DE DETALLE
   ============================================= */
.pp-detail {
  max-width: clamp(900px, 92vw, 1600px);
  margin: 2rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: start;
  box-sizing: border-box;
}

.pp-detail > * {
  min-width: 0;
}

.pp-gallery {
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.pp-gallery img,
.pp-lightbox img {
  -webkit-user-drag: none;
  user-select: none;
}

/* ── Main image wrapper ── */
.pp-gallery-main {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 460px;
  background: var(--pp-azul);
  cursor: pointer;
}

.pp-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ── Arrows ── */
.pp-gal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: rgba(28,28,28,0.45);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 28px;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.pp-gal-prev { left: 12px; }
.pp-gal-next { right: 12px; }
.pp-gal-arrow:hover { background: rgba(28,28,28,0.70); }

/* ── Counter ── */
.pp-gal-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(28,28,28,0.50);
  color: #fff;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  pointer-events: none;
}

/* ── Thumbnail strip ── */
.pp-gallery-strip {
  margin-top: 8px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pp-strip-arrow {
  flex: 0 0 auto;
  width: 28px;
  height: 60px;
  background: rgba(28,28,28,0.55);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, opacity 0.15s;
  flex-shrink: 0;
}
.pp-strip-arrow:hover { background: rgba(28,28,28,0.85); }
.pp-strip-arrow--hidden { opacity: 0; pointer-events: none; }

.pp-strip-inner {
  display: flex;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pp-strip-inner::-webkit-scrollbar { display: none; }

.pp-thumb {
  flex: 0 0 calc((100% - 54px) / 10);
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s;
  position: relative;
}
.pp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.pp-thumb.active { border-color: var(--pp-azul); }

.pp-thumb-more span {
  position: absolute;
  inset: 0;
  background: rgba(28,28,28,0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

/* ── Lightbox ── */
.pp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  /* dvh: en iOS la barra de URL no recorta la tira de miniaturas. */
  height: 100vh;
  height: 100dvh;
  /* Sin esto el navegador aplica su zoom nativo: ampliaba TODO (miniaturas,
     contador) y desplazaba la página de atrás. El zoom de la foto lo maneja
     el JS del visor. */
  touch-action: none;
  overscroll-behavior: contain;
}

/* La tira sí necesita deslizarse con el dedo (pero sigue sin pellizco). */
.pp-lightbox-strip { touch-action: pan-x; }

.pp-lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28,28,28,0.96);
}

.pp-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
}
.pp-lightbox-close:hover { background: rgba(255,255,255,0.15); }

.pp-lightbox-main {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  padding: 60px 80px 10px;
  min-height: 0;
  overflow: hidden;   /* recorta la foto ampliada, no desborda al resto */
}

.pp-lightbox-main img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
  border-radius: 4px;
}

.pp-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  font-size: 40px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.pp-lb-prev { left: 16px; }
.pp-lb-next { right: 16px; }
.pp-lightbox-arrow:hover { background: rgba(255,255,255,0.25); }

.pp-lightbox-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 16px;
  flex-shrink: 0;
  z-index: 1;
  position: relative;
  scrollbar-width: none;
}
.pp-lightbox-strip::-webkit-scrollbar { display: none; }

.pp-lb-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.6;
  transition: opacity 0.15s, border-color 0.15s;
}
.pp-lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.pp-lb-thumb.active {
  border-color: #fff;
  opacity: 1;
}

.pp-lb-counter {
  position: absolute;
  bottom: 70px;
  right: 20px;
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 768px) {
  .pp-gallery-main  { height: 300px; }
  .pp-lightbox-main { padding: 48px 12px 6px; }
  /* 44px = mínimo táctil recomendado; antes eran 40. */
  .pp-lightbox-arrow { width: 44px; height: 44px; font-size: 28px; }
}

@media (max-width: 600px) {
  /* Alto por proporción en vez de fijo: la foto usa todo el ancho de la
     pantalla con relación 4:3 (en 360px pasa de 240 a 270 de alto). */
  .pp-gallery-main { height: auto; aspect-ratio: 4 / 3; }
  .pp-thumb { flex: 0 0 calc((100% - 21px) / 4.5); height: 48px; }

  /* Lightbox a pantalla casi completa: sin flechas laterales (ver el bloque
     pointer: coarse) los márgenes horizontales pueden ir casi a cero. */
  .pp-lightbox-main { padding: 44px 4px 4px; }
  .pp-lightbox-main img { border-radius: 0; }
  .pp-lightbox-close { top: 8px; right: 8px; }
  /* La tira se separa del borde inferior (barra de gestos de Android/iOS)
     y mantiene un tamaño cómodo para el dedo. */
  .pp-lightbox-strip {
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom));
    gap: 6px;
  }
  .pp-lb-thumb { width: 68px; height: 50px; }
  /* Contador arriba a la izquierda: no compite con la tira ni con el cerrar. */
  .pp-lb-counter { top: 18px; left: 14px; bottom: auto; right: auto; }

  /* En móvil la tira se desliza con el dedo; las flechas sobran (y quedaban
     por debajo del mínimo táctil). La media miniatura visible ("peek" 4.5) más
     un fade en el borde derecho indican que hay más para deslizar. */
  .pp-strip-arrow { display: none; }
  .pp-strip-inner {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  /* Quitar el fade cuando ya no hay más a la derecha: reutiliza el mismo estado
     que el JS calcula para ocultar la flecha "next" (final del scroll o sin overflow). */
  .pp-gallery-strip:has(.pp-strip-next.pp-strip-arrow--hidden) .pp-strip-inner {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* En pantallas táctiles las flechas sobran —hay swipe y tira de miniaturas—
   y tapan los bordes de la foto. Ocultarlas libera todo el ancho. El botón
   de cerrar recibe fondo carbón para leerse sobre cualquier imagen. */
@media (pointer: coarse) {
  .pp-gal-arrow,
  .pp-lightbox-arrow { display: none; }
  .pp-lightbox-close { background: rgba(28,28,28,0.55); }
}

.pp-detail-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--pp-azul);
  margin-bottom: 0.5rem;
}

.pp-detail-location {
  font-size: 14px;
  color: var(--pp-texto-3);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.pp-detail-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  margin-bottom: 1.5rem;
  max-width: 100%;
  box-sizing: border-box;
}

.pp-detail-feat {
  background: var(--pp-azul-claro);
  border-radius: var(--pp-radio);
  padding: 12px;
  text-align: center;
}

.pp-detail-feat strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--pp-azul);
}

.pp-detail-feat span {
  font-size: 11px;
  color: var(--pp-texto-3);
}

.pp-detail-desc {
  font-size: 14px;
  color: var(--pp-texto-2);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.pp-detail-desc img,
.pp-detail-desc iframe,
.pp-detail-desc table {
  max-width: 100%;
  box-sizing: border-box;
}

.pp-detail-map {
  border-radius: var(--pp-radio-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
  height: 280px;
  background: var(--pp-img-bg);
  max-width: 100%;
  box-sizing: border-box;
}

.pp-detail-map iframe {
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: block;
}

/* =============================================
   SINGLE PROPIEDAD — NEW LAYOUT
   ============================================= */

/* Breadcrumb */
.pp-single-breadcrumb {
  max-width: 1100px; margin: 1.5rem auto 1rem; padding: 0 1.5rem;
  font-size: 15px; color: var(--pp-texto-3);
}
.pp-single-breadcrumb a { color: var(--pp-turquesa); }
.pp-breadcrumb-title { color: var(--pp-texto-2); font-weight: 700; }

/* Wrap */
.pp-single-wrap {
  max-width: clamp(900px, 92vw, 1600px);
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: start;
  box-sizing: border-box;
}
.pp-single-left    { grid-column: 1; min-width: 0; }
.pp-single-map-col { grid-column: 1; min-width: 0; }
.pp-single-right {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
}

/* Header */
.pp-single-header { margin-bottom: 1.5rem; }
.pp-single-badges {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; gap: 8px;
}
.pp-single-badges-left {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pp-single-badges-right {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.pp-single-tipo {
  padding: 5px 14px; border-radius: 6px; font-size: 10px; font-weight: 700;
  background: var(--pp-gris-borde); color: var(--pp-azul); text-transform: uppercase; letter-spacing: 0.5px;
}
.pp-single-badges .pp-card-badge {
  position: static; padding: 5px 13px; font-size: 9px; border-radius: 6px;
}
.pp-single-fav,
.pp-single-share {
  width: 42px; height: 42px; border-radius: 8px; border: 1.5px solid var(--pp-gris-borde);
  background: white; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: border-color 0.15s, color 0.15s; color: var(--pp-gris-texto);
}
.pp-single-fav:hover      { border-color: #e53e3e; color: #e53e3e; }
.pp-single-fav.saved      { color: #e53e3e; border-color: #e53e3e; }
.pp-single-fav.saved svg  { fill: #e53e3e; }
.pp-single-share:hover    { border-color: var(--pp-turquesa); color: var(--pp-turquesa); }
.pp-single-fb {
  width: 42px; height: 42px; border-radius: 8px; border: 1.5px solid var(--pp-gris-borde);
  background: white; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: border-color 0.15s, color 0.15s; color: #1877f2;
}
.pp-single-fb:hover { border-color: #1877f2; color: #1877f2; }

/* Bajar del sitio (solo admin/ATC) — mismo tamaño que fav/share, en rojo */
.pp-single-baja {
  width: 42px; height: 42px; border-radius: 8px; border: 1.5px solid #e53e3e;
  background: white; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: background 0.15s, color 0.15s; color: #e53e3e;
}
.pp-single-baja:hover { background: #e53e3e; color: #fff; }

/* Modal de confirmación de baja */
.pp-baja-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 23, 42, 0.55); align-items: center; justify-content: center; padding: 20px;
}
.pp-baja-overlay.open { display: flex; }
.pp-baja-modal {
  background: #fff; border-radius: 14px; padding: 26px; max-width: 420px; width: 100%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.pp-baja-modal h3 { margin: 0 0 8px; font-size: 18px; color: var(--pp-azul); }
.pp-baja-modal p  { margin: 0 0 20px; color: var(--pp-gris-texto); font-size: 14px; line-height: 1.5; }
.pp-baja-btns { display: flex; gap: 10px; justify-content: flex-end; }
.pp-baja-cancel, .pp-baja-confirm {
  padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1.5px solid transparent;
}
.pp-baja-cancel  { background: #fff; border-color: var(--pp-gris-borde); color: var(--pp-gris-texto); }
.pp-baja-cancel:hover  { background: #F3F2EE; }
.pp-baja-confirm { background: #e53e3e; color: #fff; }
.pp-baja-confirm:hover { background: #c53030; }
.pp-baja-confirm:disabled { opacity: 0.6; cursor: default; }

/* Aviso tras bajar */
.pp-baja-note {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-20px);
  z-index: 10000; padding: 12px 22px; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.2s, transform 0.2s;
}
.pp-baja-note.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.pp-baja-note.ok  { background: #16a34a; }
.pp-baja-note.err { background: #e53e3e; }

/* Menú de opciones (marcar cierre / bajar) */
.pp-baja-opciones { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pp-baja-op {
  padding: 13px 16px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--pp-gris-borde); background: #fff; color: var(--pp-azul); text-align: left;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pp-baja-op:disabled { opacity: 0.6; cursor: default; }
.pp-baja-op--cierre { border-color: #16a34a; color: #15803d; }
.pp-baja-op--cierre:hover { background: #16a34a; color: #fff; }
.pp-baja-op--revertir { border-color: var(--pp-turquesa); color: var(--pp-turquesa); }
.pp-baja-op--revertir:hover { background: var(--pp-turquesa); color: #fff; }
.pp-baja-op--bajar:hover  { background: #E7E7E2; border-color: var(--pp-gris-texto); }
.pp-baja-modal .pp-baja-cancel { width: 100%; text-align: center; }

/* Sello PNG de estado sobre la imagen (card + ficha) — timbre circular inclinado.
   Selectores con contenedor para ganar a `.pp-card-v2-img img` (width/height/object-fit). */
.pp-card-v2-img img.pp-estado-png,
.pp-gallery-main img.pp-estado-png,
img.pp-estado-png {
  position: absolute; top: 10px; right: 10px; left: auto; bottom: auto; z-index: 4;
  width: 44%; height: auto; max-width: 44%; object-fit: contain;
  transform: rotate(-8deg);
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.28));
  pointer-events: none;
}
.pp-gallery-main img.pp-estado-png--lg,
img.pp-estado-png--lg { top: 22px; right: calc(22px + 5%); left: auto; width: 30%; max-width: 30%; }
.pp-share-tooltip {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: var(--pp-azul); color: white; padding: 8px 16px;
  border-radius: 8px; font-size: 13px; z-index: 600; pointer-events: none;
}
.pp-single-title {
  font-size: clamp(18px, 2.5vw, 26px); font-weight: 700; color: var(--pp-azul);
  margin: 0 0 8px; line-height: 1.3;
}
.pp-single-loc {
  font-size: 15px; color: var(--pp-texto-2); display: flex; align-items: center; gap: 6px;
  margin-bottom: 1.5rem; flex-wrap: wrap;
}
.pp-single-loc a { color: var(--pp-turquesa); }

/* Spec boxes */
.pp-single-specs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 1.75rem;
}
.pp-single-spec {
  background: var(--pp-gris-borde); border-radius: 10px; padding: 14px 8px;
  text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 5px;
}
.pp-single-spec svg    { color: var(--pp-azul); }
.pp-single-spec strong { font-size: 20px; font-weight: 700; color: var(--pp-azul); }
.pp-single-spec span   { font-size: 12px; color: var(--pp-texto-3); }

/* Sections */
.pp-single-section { margin-bottom: 1.75rem; }
.pp-single-section-title {
  font-size: 17px; font-weight: 700; color: var(--pp-azul);
  margin: 0 0 0.75rem; padding-bottom: 8px; border-bottom: 1px solid var(--pp-separador);
}
.pp-single-desc {
  font-size: 15px; color: var(--pp-texto-2); line-height: 1.85;
  overflow-wrap: break-word; word-break: break-word;
}
.pp-single-desc-detalle { white-space: pre-line; }

/* Detalles list */
.pp-single-detalles { display: flex; flex-direction: column; }
.pp-single-detalle-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--pp-separador); font-size: 14px;
}
.pp-single-detalle-row:last-child { border-bottom: none; }
.pp-detalle-label { color: var(--pp-texto-3); }
.pp-detalle-value { color: var(--pp-texto); font-weight: 500; text-align: right; max-width: 60%; }

/* Tags */
.pp-single-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-single-tag {
  padding: 6px 14px; background: var(--pp-gris); border-radius: 6px;
  font-size: 13px; color: var(--pp-texto-2); border: 1px solid var(--pp-gris-borde);
}

/* Watermark */
.pp-watermark {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(158, 43, 43, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 8px;
  padding: 0 14px;
  height: 54px;
  display: flex;
  align-items: center;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  z-index: 10;
}
.pp-watermark img {
  display: block;
  height: 42px;
  width: auto;
}
@media (max-width: 768px) {
  .pp-watermark { height: 43px; padding: 0 11px; }
  .pp-watermark img { height: 30px; }
}

/* Map */
.pp-single-map-container {
  position: relative;
}
.pp-single-map-overlay-btn {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--pp-azul); color: #fff; padding: 10px 24px;
  border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none;
  white-space: nowrap; z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.pp-single-map-overlay-btn:hover { background: var(--pp-azul-oscuro); color: #fff; }
.pp-single-map-aprox-note {
  font-size: 12px; color: var(--pp-texto-3); margin: 0 0 8px;
  display: flex; align-items: center; gap: 5px;
}
.pp-single-map-aprox-note::before { content: '🔒'; font-size: 11px; }

/* Código */
.pp-single-codigo { font-size: 12px; color: var(--pp-texto-3); margin-top: 1rem; }

/* Contact card brand block */
.pp-contact-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; background: var(--pp-gris-borde); border-radius: 10px; margin-bottom: 1rem;
}
.pp-contact-brand strong { display: block; font-size: 14px; color: var(--pp-azul); }
.pp-contact-brand span   { font-size: 12px; color: var(--pp-texto-3); }

.pp-authorized-box {
  padding: 0 1.5rem;
  margin-bottom: 0.75rem;
}
.pp-authorized-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--pp-texto-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0 0 6px 2px;
}
.pp-contact-brand-logo {
  background: #1C1C1C;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5%;
  min-height: 40px;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.pp-contact-brand-img {
  width: 95%;
  height: auto;
  display: block;
}

/* Agent name (logged-in only) */
.pp-contact-agent-name {
  font-size: 13px; color: var(--pp-texto-2); margin-bottom: 1rem; padding: 7px 12px;
  background: var(--pp-gris); border-radius: 6px; display: flex; align-items: center; gap: 6px;
}

/* Inquiry form */
.pp-contact-form-title { font-size: 13px; font-weight: 600; color: var(--pp-azul); margin-bottom: 0.75rem; }
.pp-inquiry-form { display: flex; flex-direction: column; gap: 10px; }
.pp-inquiry-form input,
.pp-inquiry-form textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--pp-gris-borde);
  border-radius: 8px; font-size: 13px; font-family: inherit; box-sizing: border-box;
}
.pp-inquiry-form textarea { resize: vertical; }
.pp-inquiry-form .pp-search-btn { background: var(--pp-azul); color: white; border: none; }
.pp-inquiry-form .pp-search-btn:hover { background: var(--pp-azul-oscuro); }

/* Floating WhatsApp — mobile only */
.pp-float-wa {
  display: none;
  position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: #25d366; color: white;
  /* Altura explícita: es el diámetro que copia el botón circular de
     Reutilizar para quedar alineado con este. */
  height: 48px; padding: 0 24px; border-radius: 50px;
  font-size: 15px; font-weight: 700;
  text-decoration: none; z-index: 500;
  box-shadow: 0 4px 16px rgba(37,211,102,0.4);
  align-items: center; gap: 8px; white-space: nowrap;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.38s ease;
  will-change: transform, opacity;
}

.pp-float-wa--fusing {
  transform: translateX(calc(-50% + var(--fuse-dx, 0px))) translateY(var(--fuse-dy, 0px)) scale(0.18) !important;
  opacity: 0 !important;
  pointer-events: none;
}

@keyframes pp-wa-absorb {
  0%   { transform: scale(1);    box-shadow: 0 4px 16px rgba(37,211,102,0.4); }
  35%  { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(37,211,102,0.18); }
  65%  { transform: scale(0.96); box-shadow: 0 0 0 18px rgba(37,211,102,0.04); }
  100% { transform: scale(1);    box-shadow: 0 4px 16px rgba(37,211,102,0.4); }
}

.pp-contact-wa--absorb {
  animation: pp-wa-absorb 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Responsive */
@media (max-width: 900px) {
  .pp-single-wrap {
    grid-template-columns: 1fr;
    padding: 0 1rem 5rem;
  }
  .pp-single-left    { grid-column: auto; grid-row: auto; order: 1; }
  .pp-single-right   { grid-column: auto; grid-row: auto; order: 2; position: static; }
  .pp-single-map-col { grid-column: auto; grid-row: auto; order: 3; }
  .pp-float-wa { display: flex; }
}

@media (max-width: 600px) {
  .pp-single-specs { grid-template-columns: repeat(2, 1fr); }
}

.pp-contact-card {
  position: sticky;
  top: 80px;
  background: white;
  border: 1px solid var(--pp-gris-borde);
  border-radius: var(--pp-radio-lg);
  padding: 1.5rem;
  box-shadow: var(--pp-sombra);
}

.pp-contact-price {
  font-size: 30px;
  font-weight: 700;
  color: var(--pp-azul);
  margin-bottom: 0.25rem;
}

.pp-contact-type {
  font-size: 13px;
  color: var(--pp-texto-3);
  margin-bottom: 1.25rem;
}

.pp-contact-agent {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--pp-azul-claro);
  border-radius: var(--pp-radio);
  margin-bottom: 1rem;
}

.pp-contact-agent-info strong {
  display: block;
  font-size: 14px;
  color: var(--pp-azul);
}

.pp-contact-agent-info span {
  font-size: 12px;
  color: var(--pp-texto-3);
}

.pp-contact-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #25d366;
  color: white;
  border: none;
  padding: 13px;
  border-radius: var(--pp-radio);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  margin-bottom: 10px;
  transition: background 0.15s;
}

.pp-contact-wa:hover { background: #1ebe5d; color: white; }

.pp-contact-form-btn {
  display: block;
  width: 100%;
  background: var(--pp-azul);
  color: #fff;
  border: 2px solid var(--pp-azul);
  padding: 11px;
  border-radius: var(--pp-radio);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}

.pp-contact-form-btn:hover {
  background: var(--pp-azul-oscuro);
  color: #fff;
}

/* =============================================
   POR QUÉ ELEGIRNOS
   ============================================= */
.pp-why {
  margin: 2.5rem 0 0;
  text-align: center;
}

.pp-why > h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--pp-azul);
  margin-bottom: 1.5rem;
}

.pp-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.pp-why-item {
  background: white;
  border-radius: var(--pp-radio-lg);
  padding: 1.5rem 1.25rem;
  border: 1px solid var(--pp-gris-borde);
  box-shadow: var(--pp-sombra);
  transition: transform 0.15s;
}

.pp-why-item:hover {
  transform: translateY(-2px);
}

.pp-why-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  background: var(--pp-azul-claro);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-turquesa);
}

.pp-why-item strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--pp-azul);
  margin-bottom: 0.5rem;
}

.pp-why-item p {
  font-size: 13px;
  color: var(--pp-gris-texto);
  line-height: 1.55;
  margin: 0;
}

/* =============================================
   FOOTER
   ============================================= */
.pp-footer {
  background: var(--pp-turquesa);
  color: rgba(255,255,255,0.7);
  padding: 2.5rem 1.5rem 1.5rem;
  margin-top: 3rem;
}

.pp-footer-inner {
  max-width: clamp(900px, 92vw, 1600px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.pp-footer h4 {
  color: white;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.pp-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pp-footer ul li {
  margin-bottom: 6px;
}

.pp-footer ul a {
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  transition: color 0.15s;
}

.pp-footer ul a:hover { color: var(--pp-amarillo); }

.pp-footer-logo {
  height: 40px;
  width: auto;
  display: block;
  margin: 0 auto 0.75rem;
}
.pp-footer-brand {
  text-align: center;
  align-self: center;
}
.pp-footer-tagline-1,
.pp-footer-tagline-2 {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  color: rgba(255,255,255,0.75);
}
.pp-footer-tagline-1 { font-weight: 600; margin-bottom: 2px; }
.pp-social-links { justify-content: center; }

.pp-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1rem;
}
.pp-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: white;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}
.pp-social-link:hover { transform: translateY(-3px); }
.pp-social-link--fb:hover { background: #1877f2; }
.pp-social-link--ig:hover { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 40%, #d6249f 65%, #285aeb 90%); }
.pp-social-link--wa:hover { background: #25d366; }
.pp-social-link--tt:hover { background: #111; }
.pp-social-link--yt:hover { background: #ff0000; }
.pp-social-link--pi:hover { background: #e60023; }
.pp-social-link--li:hover { background: #0a66c2; }
.pp-social-link--x:hover  { background: #000; }

.pp-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  max-width: clamp(900px, 92vw, 1600px);
  margin: 0 auto;
}

/* =============================================
   PÁGINA DE LISTADO CON FILTROS
   ============================================= */
.pp-listing-layout {
  max-width: clamp(900px, 92vw, 1600px);
  margin: 2rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  align-items: start;
}

.pp-sidebar {
  background: var(--pp-gris);
  border-radius: var(--pp-radio-lg);
  border: 1px solid var(--pp-gris-borde);
  padding: 1.5rem;
  position: sticky;
  top: 80px;
}

.pp-sidebar h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--pp-azul);
  margin-bottom: 1.25rem;
}

.pp-filter-group {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--pp-separador);
}

.pp-filter-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.pp-filter-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--pp-texto-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.pp-filter-group select,
.pp-filter-group input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--pp-gris-borde);
  border-radius: var(--pp-radio);
  font-size: 14px;
  color: var(--pp-texto-2);
  background: white;
}

.pp-filter-group select:focus,
.pp-filter-group input:focus {
  outline: none;
  border-color: var(--pp-turquesa);
}

.pp-price-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pp-filter-apply {
  width: 100%;
  background: var(--pp-azul);
  color: white;
  border: none;
  padding: 11px;
  border-radius: var(--pp-radio);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: opacity 0.15s;
}

.pp-filter-apply:hover { opacity: 0.9; }

.pp-filter-reset {
  width: 100%;
  background: none;
  color: var(--pp-texto-3);
  border: 1px solid var(--pp-gris-borde);
  padding: 9px;
  border-radius: var(--pp-radio);
  font-size: 13px;
  cursor: pointer;
  margin-top: 8px;
  transition: border-color 0.15s;
}

.pp-filter-reset:hover { border-color: var(--pp-texto-3); }

.pp-results-count {
  font-size: 14px;
  color: var(--pp-texto-3);
  margin-bottom: 1rem;
}

.pp-results-count strong { color: var(--pp-azul); }

/* Título de la cabecera del listado — barra carbón en ambos modos */
.pp-archive-title { color: var(--pp-gris); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  .pp-navbar-menu { display: none; }
  .pp-navbar-toggle { display: block; }
  .pp-search-fields {
    grid-template-columns: 1fr 1fr;
  }
  .pp-search-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
  .pp-detail {
    grid-template-columns: 1fr;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
  }
  .pp-contact-card {
    position: static;
    width: 100%;
    box-sizing: border-box;
  }
  .pp-footer-inner {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .pp-footer-brand {
    grid-column: 1 / -1;
  }
  .pp-listing-layout {
    grid-template-columns: 1fr;
  }
  .pp-sidebar {
    position: static;
  }
  .pp-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .pp-hero-inner { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .pp-hero { padding: 2rem 1rem 2.5rem; }
  .pp-hero h1 { font-size: 26px; }
  .pp-hero-sub { font-size: 15px; }
  .pp-hero-stats { gap: 1rem; }
  .pp-search-fields { grid-template-columns: 1fr; }
  .pp-properties-grid { grid-template-columns: 1fr; }
  .pp-detail-features { grid-template-columns: repeat(2, 1fr); }
  .pp-footer-inner { grid-template-columns: 1fr 1fr; }
  .pp-footer-logo  { height: 62px; }
  .pp-banner { flex-direction: column; text-align: center; }
  .pp-banner-cta { width: 100%; text-align: center; display: block; }
  .pp-footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .pp-why-grid { grid-template-columns: 1fr 1fr; }
  .pp-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 6px;
    margin-bottom: 0.5rem;
  }
  .pp-chips::-webkit-scrollbar { display: none; }
  .pp-chip { flex-shrink: 0; }
  .pp-chips-indicator { display: flex; }
}

/* =============================================
   CARD V2 — ESTILO VERTICAL PREMIUM
   ============================================= */

.pp-card-v2 {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--pp-img-bg);
  box-shadow: 0 8px 40px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.pp-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 56px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);
}
.pp-card-v2:has(.pp-card-v2-op-venta):hover {
  box-shadow: 0 16px 48px rgba(var(--pp-op-venta-rgb), 0.28), 0 4px 12px rgba(var(--pp-op-venta-rgb), 0.14);
}
.pp-card-v2:has(.pp-card-v2-op-alquiler):hover {
  box-shadow: 0 16px 48px rgba(var(--pp-op-alquiler-rgb), 0.28), 0 4px 12px rgba(var(--pp-op-alquiler-rgb), 0.14);
}
.pp-card-v2:has(.pp-card-v2-op-anticretico):hover {
  box-shadow: 0 16px 48px rgba(var(--pp-op-anticretico-rgb), 0.28), 0 4px 12px rgba(var(--pp-op-anticretico-rgb), 0.14);
}
.pp-card-v2:has(.pp-card-v2-op-roomie):hover {
  box-shadow: 0 16px 48px rgba(var(--pp-op-roomie-rgb), 0.28), 0 4px 12px rgba(var(--pp-op-roomie-rgb), 0.14);
}
.pp-card-v2 .pp-card-v2-price-pill {
  transition: background 0.2s ease;
}
.pp-card-v2:hover .pp-card-v2-price-pill {
  background: rgba(20,20,20,0.82);
}

.pp-card-v2-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pp-card-v2-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.pp-card-v2-img .pp-card-no-img {
  width: 100%; height: 100%;
  background: var(--pp-img-bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--pp-texto-3); font-size: 13px; gap: 8px;
}

.pp-card-v2-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,0.15) 52%,
    rgba(255,255,255,0.55) 64%,
    rgba(255,255,255,0.88) 78%,
    rgba(255,255,255,1.0)  90%
  );
  pointer-events: none;
}

.pp-card-v2-blur {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 50%);
  pointer-events: none;
  z-index: 1;
}

.pp-card-v2-price-pill {
  display: inline-block;
  background: rgba(80,80,80,0.55);
  color: white;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 400;
  font-family: var(--font-body);
  backdrop-filter: blur(4px);
  margin-bottom: 6px;
  width: fit-content;
}

.pp-card-v2-fav {
  position: absolute;
  top: 12px; right: 12px;
  width: auto; height: auto;
  background: none;
  border: none; border-radius: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: white;
  z-index: 3;
  padding: 4px;
  transition: color 0.15s;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.pp-card-v2-fav svg       { width: 18px; height: 18px; }
.pp-card-v2-fav:hover     { color: #e53e3e; }
.pp-card-v2-fav.saved     { color: #e53e3e; }
.pp-card-v2-fav.saved svg { fill: #e53e3e; stroke: #e53e3e; }

.pp-card-v2-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 14px 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.pp-card-v2-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  color: var(--pp-texto); line-height: 1.3;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pp-card-v2-location {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--pp-texto-2);
  margin-bottom: 10px;
}

.pp-card-v2-specs {
  display: flex; gap: 5px; flex-wrap: nowrap;
  overflow: hidden; margin-top: 6px;
}
.pp-card-v2-spec {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: var(--pp-gris); border: 1px solid var(--pp-gris-borde);
  border-radius: 50px;
  font-size: 11px; color: var(--pp-texto-2); font-weight: 500;
  white-space: nowrap; flex-shrink: 0;
}

.pp-card-v2-zona-pill {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,0.75); color: var(--pp-texto);
  padding: 4px 12px; border-radius: 50px;
  font-size: 11px; font-weight: 500;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 3;
  max-width: calc(100% - 60px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Pill de operación en card ── */
.pp-card-v2-op-pill {
  position: absolute; top: 40px; left: 12px;
  padding: 3px 10px; border-radius: 50px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: #fff; z-index: 3;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pp-card-v2-op-venta       { background: rgba(var(--pp-op-venta-rgb),       0.65); }
.pp-card-v2-op-alquiler    { background: rgba(var(--pp-op-alquiler-rgb),    0.65); }
.pp-card-v2-op-anticretico { background: rgba(var(--pp-op-anticretico-rgb), 0.65); }
.pp-card-v2-op-roomie      { background: rgba(var(--pp-op-roomie-rgb),      0.65); }

/* ── Badges de operación en single-propiedad ── */
.pp-badge-venta       { background: var(--pp-op-venta); color: var(--pp-blanco); }
.pp-badge-alquiler    { background: var(--pp-op-alquiler); color: var(--pp-blanco); }
.pp-badge-anticretico { background: var(--pp-op-anticretico); color: var(--pp-blanco); }
.pp-badge-roomie      { background: var(--pp-op-roomie); color: var(--pp-blanco); }

.pp-properties-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.pp-properties-grid--alquiler {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1366px) {
  .pp-properties-grid { grid-template-columns: repeat(2, 1fr); }
  .pp-properties-grid--alquiler { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .pp-properties-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .pp-properties-grid--alquiler { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 480px) {
  .pp-properties-grid { grid-template-columns: 1fr; gap: 0.75rem; }
  .pp-properties-grid--alquiler { grid-template-columns: 1fr; }
  .pp-card-v2-title { font-size: 13px; }
}

/* ── Franja diagonal "VENDIDA" ── */
.pp-vendida-ribbon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  background: rgba(255, 255, 255, 0.88);
  color: #dc2626;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 4px;
  width: 200%;
  text-align: center;
  padding: 9px 0;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
  display: block;
}
.pp-vendida-ribbon--lg {
  font-size: 28px;
  letter-spacing: 10px;
  padding: 16px 0;
}

/* =============================================
   BOTÓN DARK MODE TOGGLE
   ============================================= */
.pp-dark-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: #C3C4BF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.pp-dark-toggle:hover { color: #fff; background: rgba(255,255,255,0.12); }
.pp-dark-toggle__sun  { display: none; }

html.dark-mode .pp-dark-toggle__moon { display: none; }
html.dark-mode .pp-dark-toggle__sun  { display: flex; }

/* =============================================
   DARK MODE
   ============================================= */
/* Paleta noche cálida (paxmarka): casi-negro tierra + tinta hueso + acento teja.
   Arquitectura: cáscara oscura con tarjetas claras (islas). Solo se re-tiñe el
   texto que va directo sobre la cáscara; las tarjetas blancas conservan su tinta
   oscura. Las variables mantienen sus nombres heredados de arcvita (--pp-azul =
   carbón, --pp-turquesa = teja, --pp-amarillo = arena). */
html.dark-mode {
  --pp-gris:     #1C1C1C;   /* fondo: carbón (paleta) — antes casi-negro fuera de paleta */
  --pp-turquesa: #1C1C1C;   /* acento monocromo → carbón (sin teja) */
  --pp-amarillo: #F3F2EE;   /* realce → hueso */
  --pp-sombra:   0 2px 16px rgba(0,0,0,0.55);
}

html.dark-mode body {
  background: var(--pp-gris);
  color: #F3F2EE;           /* tinta hueso */
}

/* Títulos sobre fondo oscuro */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
  color: #F3F2EE;
}

/* — Avatar del header al estar logeado: acento de marca teja con letra arena — */
html.dark-mode .pp-user-avatar {
  background: #9E2B2B;   /* teja */
  color: #E4D9C8;        /* arena */
}

/* — Contact card y Why grid: son tarjetas claras → tinta oscura — */
html.dark-mode .pp-contact-card,
html.dark-mode .pp-why-item {
  color: #1C1C1C;
}
/* Caja sticky (contacto) con el mismo panel hueso del buscador; el botón de
   WhatsApp (verde) y el logo PRO conservan sus colores propios. */
html.dark-mode .pp-contact-card { background: #F3F2EE; }
/* Campos del formulario de consulta: blancos como los del buscador (no los
   inputs oscuros globales), para que combinen con el panel hueso. */
html.dark-mode .pp-contact-card input,
html.dark-mode .pp-contact-card textarea {
  background-color: #fff;
  color: var(--pp-azul);
  border-color: #DBDBD7;
}
html.dark-mode .pp-contact-card input::placeholder,
html.dark-mode .pp-contact-card textarea::placeholder { color: #80817E; }
html.dark-mode .pp-contact-card h1, html.dark-mode .pp-contact-card h2,
html.dark-mode .pp-contact-card h3, html.dark-mode .pp-contact-card h4,
html.dark-mode .pp-why-item h1,     html.dark-mode .pp-why-item h2,
html.dark-mode .pp-why-item h3,     html.dark-mode .pp-why-item h4 {
  color: #1C1C1C;
}

/* — Buscador hero — fondo hueso, letras carbón — */
html.dark-mode .pp-search-box {
  background: #F3F2EE;
  color: var(--pp-azul);
}
/* Quitar barra gris detrás de las tabs Compra/Alquiler/Anticrético */
html.dark-mode .pp-search-tabs { background: transparent; }

html.dark-mode .pp-search-field label { color: var(--pp-azul); }
html.dark-mode .pp-search-field select,
html.dark-mode .pp-search-field input {
  background: #fff;
  color: var(--pp-azul);
  border-color: #DBDBD7;
}

/* — Detalle de propiedad: texto sobre fondo oscuro — */
html.dark-mode .pp-single-title              { color: #F3F2EE; }
html.dark-mode .pp-single-loc                { color: #C3C4BF; }
html.dark-mode .pp-single-desc               { color: #C3C4BF; }
html.dark-mode .pp-single-section-title {
  color: #F3F2EE;
  border-bottom-color: rgba(255,255,255,0.1);
}
html.dark-mode .pp-detalle-label             { color: #C3C4BF; }
html.dark-mode .pp-detalle-value             { color: #C3C4BF; }
html.dark-mode .pp-single-detalle-row        { border-bottom-color: rgba(255,255,255,0.08); }
html.dark-mode .pp-single-tag {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
  color: #C3C4BF;
}
html.dark-mode .pp-single-map-aprox-note     { color: #C3C4BF; }

/* — Pills de specs en cards (3 dorm, 2 baño…): panel claro cálido — */
html.dark-mode .pp-card-v2-spec {
  background: #EEE9E1;
  border-color: #DBDBD7;
  color: #5D5D5C;
}

/* — Banner anticrético: panel niebla, botón carbón con letras niebla — */
html.dark-mode .pp-banner {
  background: #C3C4BF;
}
html.dark-mode .pp-banner h3 { color: #1C1C1C; }
html.dark-mode .pp-banner p  { color: rgba(28,28,28,0.78); }
html.dark-mode .pp-banner-cta {
  background: #1C1C1C;
  color: #C3C4BF;
}

/* — Chips (Casa, Depto, etc.): píldora hueso, texto carbón — */
html.dark-mode .pp-chip {
  background: #F3F2EE;
  color: #1C1C1C;
  border-color: #F3F2EE;
}

/* ============================================================
   MODO NOCHE — home (spec de color): hueso · niebla · carbón
   hueso #F3F2EE · niebla #C3C4BF · carbón #1C1C1C
   ============================================================ */
/* Hero: titular en hueso, palabra destacada en niebla */
html.dark-mode .pp-hero h1            { color: #F3F2EE; }
html.dark-mode .pp-hero h1 em         { color: #C3C4BF; }
/* Subtítulo en hueso; La Paz / Bolivia en niebla */
html.dark-mode .pp-hero-sub           { color: #F3F2EE; }
html.dark-mode .pp-hero-sub .pp-niebla { color: #C3C4BF; }
/* Contadores: número en hueso, etiqueta en niebla */
html.dark-mode .pp-stat strong        { color: #F3F2EE; }
html.dark-mode .pp-stat span          { color: #C3C4BF; }

/* — Listado /propiedades: sidebar de filtros = mismos colores del buscador hero — */
html.dark-mode .pp-sidebar { background: #F3F2EE; border-color: #C3C4BF; }
html.dark-mode .pp-sidebar h3,
html.dark-mode .pp-sidebar .pp-filter-group label { color: #1C1C1C; }
html.dark-mode .pp-sidebar select,
html.dark-mode .pp-sidebar input {
  background-color: #fff;
  color: #1C1C1C;
  border-color: #DBDBD7;
}
html.dark-mode .pp-results-count        { color: #C3C4BF; }
html.dark-mode .pp-results-count strong { color: #F3F2EE; }
/* Título de la cabecera del listado (barra carbón) legible en ambos modos */
html.dark-mode .pp-archive-title { color: #F3F2EE; }

/* — Inputs globales (formulario de consulta, etc.) — */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
  background-color: #252525;
  color: #F3F2EE;
  border-color: #363636;
}
/* Buscador hero sobreescribe globales */
html.dark-mode .pp-search-field select,
html.dark-mode .pp-search-field input {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  color: var(--pp-azul);
  border-color: #DBDBD7;
}

/* — Acento monocromo: el teja que iba como texto/enlace sobre la cáscara
     oscura pasa a hueso (el carbón sería invisible sobre el fondo negro) — */
html.dark-mode .av-logo-vita,
html.dark-mode .pp-section-header a,
html.dark-mode .pp-single-breadcrumb a,
html.dark-mode .pp-single-loc a,
html.dark-mode .pp-single-share:hover {
  color: #F3F2EE;
}
/* Divisor del logo: carbón sobre navbar carbón sería invisible → gris */
html.dark-mode .av-logo-line { background: #80817E; }
/* Botón de búsqueda: carbón con texto hueso, sobre el panel claro del hero */
html.dark-mode .pp-search-btn {
  background: #1C1C1C;
  color: #F3F2EE;
}

/* Icono inline (reemplaza emoji-viñeta en menús y datos de contacto).
   Hereda el color del texto vía currentColor; tamaño relativo a la fuente. */
.pp-ico-inline {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -.15em;
  margin-right: .4em;
  flex-shrink: 0;
}

/* ==========================================================================
   Accesibilidad — foco visible por teclado (WCAG 2.4.7)
   Aparece SOLO en navegación con teclado (:focus-visible), no al hacer clic.
   :where() da especificidad 0: este anillo es un fallback que cede ante
   cualquier estilo de foco propio de un componente (p. ej. los inputs que
   ya usan border-color). No afecta el layout (outline no ocupa espacio).
   ========================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--pp-turquesa);
  outline-offset: 2px;
}
/* En modo oscuro el acento es carbón → el anillo de foco usa hueso (--pp-amarillo). */
html.dark-mode :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--pp-amarillo);
}

/* ==========================================================================
   Accesibilidad — respetar "reducir movimiento" del sistema (WCAG 2.3.3)
   Aplica SOLO a quien activó la preferencia en su SO. Neutraliza animaciones
   y transiciones en todo el sitio, y desactiva el scroll animado a anclas.
   Excepción: el spinner de carga (.pp-ia-spinner) sigue girando porque es un
   indicador funcional, no decorativo.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Excepción: el indicador de carga debe seguir animándose */
  .pp-ia-spinner {
    animation-duration: .7s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ==========================================================================
   Páginas comunes (page.php) y "no encontrado" (404.php)
   Van acá y no en blog.css porque ese archivo solo se encola en el blog y sus
   archivos; estas dos plantillas se dibujan en cualquier ruta del sitio.
   El héroe replica el de los archivos (.av-arch-hero) para que la cabecera de
   una página se lea igual que la de una categoría.
   ========================================================================== */

/* ── Héroe de página ── */
.av-page-hero {
  background: linear-gradient(135deg, var(--pp-azul) 0%, var(--pp-turquesa) 100%);
  padding: 2.5rem 1.5rem;
}
.av-page-hero-inner {
  max-width: clamp(720px, 92vw, 860px);
  margin: 0 auto;
}
.av-page-title {
  font-family: var(--font-display);
  color: var(--pp-blanco);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

/* ── Contenedor de lectura — más angosto que el del blog: acá es texto corrido ── */
.av-page-wrap {
  max-width: clamp(720px, 92vw, 860px);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

/* ── Tipografía del contenido ── */
.av-page-content {
  color: var(--pp-texto);
  font-size: 16px;
  line-height: 1.75;
}
.av-page-content > :first-child { margin-top: 0; }
.av-page-content > :last-child  { margin-bottom: 0; }

.av-page-content h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  line-height: 1.3;
  margin: 2.5rem 0 .75rem;
}
.av-page-content h3 {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.4vw, 20px);
  font-weight: 700;
  line-height: 1.35;
  margin: 2rem 0 .5rem;
}
.av-page-content h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 1.5rem 0 .5rem;
}
.av-page-content p { margin: 0 0 1.15rem; }

.av-page-content ul,
.av-page-content ol { margin: 0 0 1.15rem; padding-left: 1.4rem; }
.av-page-content li { margin-bottom: .45rem; }

.av-page-content a {
  color: var(--pp-turquesa);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.av-page-content a:hover { text-decoration: none; }

.av-page-content strong { font-weight: 700; }

.av-page-content blockquote {
  margin: 1.5rem 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 3px solid var(--pp-turquesa);
  color: var(--pp-texto-2);
}
.av-page-content blockquote p:last-child { margin-bottom: 0; }

.av-page-content hr {
  border: 0;
  border-top: 1px solid var(--pp-separador);
  margin: 2.5rem 0;
}

.av-page-content img,
.av-page-content iframe { max-width: 100%; height: auto; border-radius: var(--pp-radio); }
.av-page-content figure { margin: 1.75rem 0; }
.av-page-content figcaption {
  color: var(--pp-texto-3);
  font-size: 13px;
  margin-top: .5rem;
}

.av-page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 15px;
}
.av-page-content th,
.av-page-content td {
  border: 1px solid var(--pp-gris-borde);
  padding: .6rem .75rem;
  text-align: left;
}
.av-page-content th { background: var(--pp-separador); font-weight: 700; }

/* Paginación interna de una página larga (<!--nextpage-->) */
.av-page-links {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pp-separador);
  font-size: 14px;
  color: var(--pp-texto-2);
}
.av-page-links a { color: var(--pp-turquesa); text-decoration: none; font-weight: 600; }
.av-page-links a:hover { text-decoration: underline; }

/* ── 404 ── */
.av-404 { text-align: center; padding-top: 4.5rem; padding-bottom: 5rem; }
.av-404-code {
  font-family: var(--font-display);
  font-size: clamp(64px, 14vw, 120px);
  font-weight: 700;
  line-height: 1;
  color: var(--pp-turquesa);
  margin: 0;
}
.av-404-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  margin: .75rem 0 0;
}
.av-404-text {
  color: var(--pp-texto-2);
  font-size: 16px;
  line-height: 1.7;
  max-width: 480px;
  margin: 1rem auto 0;
}
.av-404-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 2rem;
}
.av-404-btn {
  display: inline-block;
  padding: 10px 24px;
  border: 1px solid var(--pp-gris-borde);
  border-radius: 8px;
  background: var(--pp-blanco);
  color: var(--pp-texto);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.av-404-btn:hover { border-color: var(--pp-turquesa); color: var(--pp-turquesa); }
.av-404-btn--primary {
  background: var(--pp-azul);
  border-color: var(--pp-azul);
  color: var(--pp-blanco);
}
.av-404-btn--primary:hover {
  background: var(--pp-turquesa);
  border-color: var(--pp-turquesa);
  color: var(--pp-blanco);
}

/* ── Modo noche ──────────────────────────────────────────────────────────────
   En noche --pp-turquesa se vuelve carbón, así que los tonos de acento van
   literales acá (teja #9E2B2B, arena #E4D9C8, hueso #F3F2EE), igual que en
   blog.css.
   El héroe ya es oscuro de día (carbón → teja), así que de noche se queda
   igual; solo hay que repetir el degradado con hex, porque si no --pp-turquesa
   pasa a carbón y se aplana. Mismo criterio que .av-arch-hero en blog.css.
   Antes se invertía a fondo arena con letra carbón: quedaba una banda clara
   pegada arriba de una página oscura. */
html.dark-mode .av-page-hero {
  background: linear-gradient(135deg, #1C1C1C 0%, #9E2B2B 100%);
}
html.dark-mode .av-page-title { color: #F3F2EE; }

html.dark-mode .av-page-content            { color: #F3F2EE; }
html.dark-mode .av-page-content a          { color: #E4D9C8; }
html.dark-mode .av-page-content blockquote {
  border-left-color: #E4D9C8;
  color: #C3C4BF;
}
html.dark-mode .av-page-content hr         { border-top-color: rgba(255,255,255,.14); }
html.dark-mode .av-page-content figcaption { color: #C3C4BF; }
html.dark-mode .av-page-content th,
html.dark-mode .av-page-content td         { border-color: rgba(255,255,255,.16); }
html.dark-mode .av-page-content th         { background: rgba(255,255,255,.06); }

html.dark-mode .av-page-links   { border-top-color: rgba(255,255,255,.14); color: #C3C4BF; }
html.dark-mode .av-page-links a { color: #E4D9C8; }

html.dark-mode .av-404-code  { color: #9E2B2B; }
html.dark-mode .av-404-title { color: #F3F2EE; }
html.dark-mode .av-404-text  { color: #C3C4BF; }
html.dark-mode .av-404-btn {
  background: transparent;
  border-color: rgba(255,255,255,.24);
  color: #F3F2EE;
}
html.dark-mode .av-404-btn:hover { border-color: #E4D9C8; color: #E4D9C8; }
html.dark-mode .av-404-btn--primary {
  background: #F3F2EE;
  border-color: #F3F2EE;
  color: #1C1C1C;
}
html.dark-mode .av-404-btn--primary:hover {
  background: #9E2B2B;
  border-color: #9E2B2B;
  color: #F3F2EE;
}