/* Proyectos: listado, ficha pública y panel Mis Proyectos.
   Colores de marca: morado de títulos #846584, verde de acción #54B48C. */

:root {
  --proy-morado: #846584;
  --proy-morado-suave: #f6f1f5;
  --proy-verde: #54B48C;
  --proy-verde-hover: #3fa070;
  --proy-texto: #2d3748;
  --proy-gris: #4a5568;
  --proy-borde: #e5e0e4;
  --proy-ambar: #b7791f;
  --proy-ambar-bg: #fff7e6;
}

.proy-wrap { max-width: 1180px; margin: 0 auto; padding: 24px 16px 64px; color: var(--proy-texto); }
.proy-wrap h1 { color: var(--proy-morado); font-weight: 700; }
.proy-wrap h2 { color: var(--proy-morado); font-weight: 700; font-size: 1.3rem; margin: 0 0 12px; }
.proy-muted { color: var(--proy-gris); }

.proy-btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px;
  padding: 10px 18px; font-weight: 600; text-decoration: none; cursor: pointer;
  background: var(--proy-verde); color: #fff; transition: background .15s;
}
.proy-btn:hover { background: var(--proy-verde-hover); color: #fff; }
.proy-btn--outline { background: #fff; color: var(--proy-morado); border: 1.5px solid var(--proy-morado); }
.proy-btn--outline:hover { background: var(--proy-morado-suave); color: var(--proy-morado); }
.proy-btn--wa { background: #25D366; }
.proy-btn--wa:hover { background: #1ebe5a; }
.proy-btn--sm { padding: 6px 12px; font-size: .85rem; border-radius: 8px; }

.proy-chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--proy-morado-suave); color: var(--proy-morado);
}
.proy-chip--verde { background: #e8f6ef; color: #2f7d5b; }
.proy-chip--ambar { background: var(--proy-ambar-bg); color: var(--proy-ambar); }
.proy-chip--gris { background: #edf2f7; color: var(--proy-gris); }

.proy-aviso {
  border-radius: 12px; padding: 12px 16px; margin-bottom: 20px;
  background: var(--proy-ambar-bg); border: 1px solid #f6d58e; color: #744210;
}

/* ── Tarjetas de proyecto ── */
.proy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.proy-card {
  background: #fff; border: 1px solid var(--proy-borde); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: box-shadow .15s, transform .15s;
}
.proy-card:hover { box-shadow: 0 8px 24px rgba(132, 101, 132, .18); transform: translateY(-2px); color: inherit; }
.proy-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--proy-morado-suave); }
.proy-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.proy-card-nombre { font-size: 1.1rem; font-weight: 700; color: var(--proy-morado); margin: 0; }
.proy-card-precios { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .9rem; margin-top: auto; padding-top: 8px; }
.proy-card-precios strong { color: var(--proy-texto); }

.proy-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 16px 0 24px; }
.proy-filtros select { min-width: 200px; }

/* ── Ficha del proyecto ── */
.proy-hero { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; border-radius: 16px; overflow: hidden; margin-bottom: 20px; }
.proy-hero img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.proy-hero-principal { aspect-ratio: 16/10; }
.proy-hero-lado { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.proy-hero-lado a, .proy-hero-principal a { display: block; height: 100%; min-height: 0; }
.proy-galeria-mas { position: relative; }
.proy-galeria-mas span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45); color: #fff; font-weight: 700; font-size: 1.1rem; pointer-events: none;
}

.proy-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.proy-lateral { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
.proy-panel { background: #fff; border: 1px solid var(--proy-borde); border-radius: 14px; padding: 18px; }
.proy-seccion { margin-bottom: 32px; }

.proy-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.proy-kpi { background: var(--proy-morado-suave); border-radius: 12px; padding: 12px 14px; }
.proy-kpi-label { font-size: .78rem; color: var(--proy-gris); text-transform: uppercase; letter-spacing: .03em; }
.proy-kpi-valor { font-size: 1.15rem; font-weight: 700; color: var(--proy-texto); }

.proy-avance { height: 8px; border-radius: 999px; background: #edf2f7; overflow: hidden; margin: 6px 0; }
.proy-avance span { display: block; height: 100%; background: var(--proy-verde); }

.proy-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; margin: 0; }
.proy-ficha div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--proy-borde); }
.proy-ficha dt { font-weight: 500; color: var(--proy-gris); }
.proy-ficha dd { margin: 0; font-weight: 600; text-align: right; }

.proy-amenidades { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }

/* Tabla de unidades: en móvil cada fila se vuelve tarjeta */
.proy-tabla-wrap { overflow-x: auto; }
.proy-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.proy-tabla th {
  text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--proy-gris); padding: 8px 10px; border-bottom: 2px solid var(--proy-borde); white-space: nowrap;
}
.proy-tabla td { padding: 10px 8px; border-bottom: 1px solid var(--proy-borde); vertical-align: middle; }
.proy-tabla td:last-child { text-align: right; }
.proy-tabla tr:hover td { background: #faf8fa; }
.proy-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.proy-tabla .unidad-nombre { font-weight: 700; color: var(--proy-morado); white-space: nowrap; }
.proy-tabla .fila-reservada td { opacity: .7; }

.proy-mapa { height: 320px; border-radius: 14px; overflow: hidden; border: 1px solid var(--proy-borde); }

.proy-form label { font-weight: 500; font-size: .88rem; margin-bottom: 4px; display: block; }
.proy-form .form-control { margin-bottom: 10px; }
.proy-form .errorlist { color: #c53030; font-size: .82rem; padding-left: 0; list-style: none; margin: -6px 0 8px; }
.proy-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ── Panel ── */
.proy-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 20px; }
.proy-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.proy-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }
.proy-form-card { background: #fff; border: 1px solid var(--proy-borde); border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; }
.proy-form-card h2 { font-size: 1.05rem; margin-bottom: 14px; }
.proy-check { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 500; }
.proy-check input { width: 18px; height: 18px; }
.proy-combinables ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.proy-combinables label { font-weight: 400; display: inline-flex; gap: 6px; align-items: center; }
.proy-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.proy-fotos figure { margin: 0; position: relative; }
.proy-fotos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; }
.proy-fotos form { position: absolute; top: 4px; right: 4px; }
.proy-fotos button { border: 0; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; padding: 2px 8px; font-size: .8rem; }

@media (max-width: 900px) {
  .proy-layout { grid-template-columns: 1fr; }
  .proy-lateral { position: static; }
  .proy-hero { grid-template-columns: 1fr; }
  .proy-hero-lado { display: none; }
}

@media (max-width: 640px) {
  .proy-tabla thead { display: none; }
  .proy-tabla, .proy-tabla tbody, .proy-tabla tr, .proy-tabla td { display: block; width: 100%; }
  .proy-tabla tr { border: 1px solid var(--proy-borde); border-radius: 12px; margin-bottom: 12px; padding: 8px 4px; }
  .proy-tabla td { border: 0; padding: 4px 10px; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .proy-tabla td::before { content: attr(data-label); font-weight: 500; color: var(--proy-gris); text-align: left; }
  .proy-tabla td.unidad-nombre { display: block; text-align: left; font-size: 1.05rem; }
  .proy-tabla td.unidad-nombre::before { content: none; }
  .proy-tabla .num { text-align: right; }
  .proy-filtros select { min-width: 0; width: 100%; }
}

/* ── Formulario de proyecto: ficha comercial según el tipo ── */
.proy-dueno { background: var(--proy-morado-suave); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.proy-dueno i { color: var(--proy-morado); margin-right: 6px; }
.proy-ficha-vacia {
  border: 1.5px dashed var(--proy-borde); border-radius: 12px; padding: 18px; text-align: center;
  color: var(--proy-gris); background: #fcfbfc;
}
.proy-ficha-vacia i { color: var(--proy-morado); margin-right: 6px; }
.proy-ficha-grupo { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.proy-ficha-grupo legend {
  float: none; width: 100%; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--proy-morado); border-bottom: 1px solid var(--proy-borde); padding-bottom: 6px; margin-bottom: 12px;
}
.proy-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 20px; }
.proy-checks:empty { display: none; }
.proy-campo-ancho { grid-column: 1 / -1; }
.proy-form [hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Listado público de proyectos (/proyectos/)
   Mismo lenguaje que el landing de inversionistas (hero oscuro con brillo,
   titular en degradado verde→morado) y que la home (chips verdes, banda
   morada). Tokens de marca: verde #54B48C/#3FC38C, morado #7B3F7B/#9A5C9A.
   ══════════════════════════════════════════════════════════════════════════ */
.pl {
  --g: #54B48C; --g2: #3FC38C; --g-deep: #2ea87a;
  --p: #7B3F7B; --p2: #9A5C9A; --p-titulo: #846584;
  --ink: #241a28; --muted: #5d5464; --line: #ece6ee; --bg: #f8f6f9;
  /* clip y no hidden: hidden rompe el position: sticky de las pestañas y del formulario */
  background: var(--bg); overflow-x: clip; color: var(--ink);
}
.pl-wrap { max-width: 1180px; margin-inline: auto; padding-inline: 16px; }
.pl-grad {
  background: linear-gradient(100deg, var(--g2) 10%, #c9a3d1 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pl-grad--oscuro { background-image: linear-gradient(100deg, var(--g-deep), var(--p2)); }
.pl-punto {
  width: 8px; height: 8px; border-radius: 50%; background: var(--g2); display: inline-block;
  box-shadow: 0 0 0 0 rgba(63, 195, 140, .6); animation: pl-latido 2s infinite;
}
@keyframes pl-latido { 70% { box-shadow: 0 0 0 8px rgba(63, 195, 140, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 195, 140, 0); } }
@media (prefers-reduced-motion: reduce) { .pl-punto { animation: none; } }

/* ── Hero ── */
.pl-hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 130% at 85% 10%, #5c3a63 0%, #2f1f35 48%, #1e1523 100%);
  padding: clamp(28px, 5vw, 56px) 0 clamp(96px, 11vw, 128px);
}
.pl-hero::before, .pl-hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none;
}
.pl-hero::before { width: 460px; height: 460px; background: radial-gradient(circle, var(--g2), transparent 70%); top: -170px; right: -60px; opacity: .45; }
.pl-hero::after { width: 420px; height: 420px; background: radial-gradient(circle, var(--p2), transparent 70%); bottom: -200px; left: -120px; opacity: .55; }
.pl-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.pl-migas { font-size: .8rem; color: rgba(255, 255, 255, .6); display: flex; gap: 8px; margin-bottom: 18px; }
.pl-migas a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.pl-migas a:hover { color: #fff; }
.pl-chip-vivo {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  font-size: .82rem; font-weight: 600; backdrop-filter: blur(6px);
}
.pl-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
  margin: 18px 0 16px; color: #fff;
}
.pl-hero-sub { font-size: clamp(1rem, 1.6vw, 1.12rem); color: rgba(255, 255, 255, .78); max-width: 560px; margin: 0; line-height: 1.6; }
.pl-stats { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 30px 0 0; }
.pl-stats div { display: flex; flex-direction: column-reverse; }
.pl-stats dt { font-size: .8rem; font-weight: 500; color: rgba(255, 255, 255, .65); }
.pl-stats dd {
  margin: 0; font-size: 2.1rem; font-weight: 800; line-height: 1.1;
  background: linear-gradient(120deg, var(--g2), #fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Tarjeta flotante del proyecto destacado */
.pl-destacado {
  display: block; text-decoration: none; color: inherit; padding: 14px; border-radius: 22px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px); box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  transform: rotate(1.2deg); transition: transform .25s ease;
}
.pl-destacado:hover { transform: rotate(0) translateY(-4px); color: inherit; }
.pl-destacado-head { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; color: #fff; padding: 2px 6px 12px; }
.pl-en-vivo { display: inline-flex; align-items: center; gap: 6px; color: var(--g2); font-weight: 600; }
.pl-destacado-card { background: #fff; border-radius: 16px; overflow: hidden; color: var(--ink); }
.pl-destacado-card img { width: 100%; aspect-ratio: 16/8.5; object-fit: cover; display: block; }
.pl-destacado-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.pl-op-badge {
  align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; font-size: .68rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--g-deep); padding: 4px 10px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(84, 180, 140, .16), rgba(63, 195, 140, .12)); margin-bottom: 6px;
}
.pl-destacado-nombre { font-size: 1.15rem; font-weight: 800; }
.pl-destacado-ubic { font-size: .85rem; color: var(--muted); }
.pl-destacado-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 10px; }
.pl-destacado-datos div { background: #f6f3f7; border-radius: 12px; padding: 8px 12px; }
.pl-destacado-datos small { display: block; font-size: .72rem; color: var(--muted); }
.pl-destacado-datos b { font-size: 1.05rem; }
.pl-destacado-cta { font-size: .85rem; font-weight: 700; color: var(--g-deep); }

/* ── Buscador flotante ── */
.pl-buscador {
  position: relative; z-index: 2; margin-top: -64px; background: #fff; border-radius: 20px;
  padding: 18px 20px 20px; box-shadow: 0 18px 50px rgba(47, 31, 53, .16); border: 1px solid var(--line);
}
.pl-segmento { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: #f3eef4; border: 0; margin: 0 0 14px; }
.pl-segmento label { margin: 0; cursor: pointer; }
.pl-segmento input { position: absolute; opacity: 0; pointer-events: none; }
.pl-segmento span { display: block; padding: 7px 18px; border-radius: 9px; font-weight: 600; font-size: .9rem; color: var(--muted); transition: background .15s, color .15s; }
.pl-segmento input:checked + span { background: #fff; color: var(--p); box-shadow: 0 2px 8px rgba(123, 63, 123, .15); }
.pl-segmento input:focus-visible + span { outline: 2px solid var(--p2); outline-offset: 2px; }
.pl-campos { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; }
.pl-campo { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pl-campo span { font-size: .78rem; font-weight: 600; color: var(--muted); }
.pl-campo select {
  height: 50px; border-radius: 12px; border: 1.5px solid var(--line); padding: 0 14px; font-size: .95rem;
  background: #fff; color: var(--ink); font-family: inherit;
}
.pl-campo select:focus { outline: none; border-color: var(--p2); box-shadow: 0 0 0 3px rgba(154, 92, 154, .15); }
.pl-btn-buscar {
  height: 50px; border: 0; border-radius: 12px; padding: 0 26px; font-weight: 700; color: #fff; display: inline-flex;
  align-items: center; gap: 8px; background: linear-gradient(135deg, var(--g2), var(--g-deep));
  box-shadow: 0 8px 22px rgba(46, 168, 122, .35); transition: transform .15s, box-shadow .15s;
}
.pl-btn-buscar:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(46, 168, 122, .45); }

/* Chips de tipo (como los de la home) */
.pl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px 0 0; }
.pl-chip-tipo {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; text-decoration: none;
  background: var(--g); color: #fff; font-size: .88rem; font-weight: 600; transition: background .15s, transform .15s;
}
.pl-chip-tipo b { background: rgba(255, 255, 255, .25); border-radius: 999px; padding: 0 8px; font-size: .78rem; }
.pl-chip-tipo:hover { background: var(--g-deep); color: #fff; transform: translateY(-1px); }
.pl-chip-tipo.activo { background: var(--p); }

/* ── Resultados ── */
.pl-resultados { padding: 44px 0 56px; }
.pl-resultados-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
.pl-resultados-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 800; margin: 0; color: var(--ink); }
.pl-limpiar { font-size: .88rem; font-weight: 600; color: var(--p); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }

/* ── Tarjeta de proyecto ── */
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.pc {
  position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden;
  border: 1px solid #ece6ee; box-shadow: 0 6px 20px rgba(47, 31, 53, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pc:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(47, 31, 53, .16); }
.pc-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.pc-link:focus-visible { outline: 3px solid #9A5C9A; outline-offset: 2px; }
.pc-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #efe8f0; }
.pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; }
.pc:hover .pc-media img { transform: scale(1.06); }
.pc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, transparent 35%, transparent 55%, rgba(20, 10, 25, .65) 100%); }
.pc-sin-foto { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #c9b4cc; background: linear-gradient(135deg, #f3edf4, #e6dbe8); }
.pc-tag {
  position: absolute; top: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.pc-tag--tipo { left: 14px; background: #fff; color: #7B3F7B; }
.pc-tag--estado { right: 14px; background: #3FC38C; color: #fff; }
.pc-tag--obra { right: 14px; background: #f6c453; color: #5c3c00; }
.pc-disponibles {
  position: absolute; left: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
  color: #fff; font-weight: 700; font-size: .88rem; padding: 6px 12px; border-radius: 999px;
  background: rgba(20, 10, 25, .45); backdrop-filter: blur(6px);
}
.pc-body { padding: 18px 20px 6px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pc-nombre { font-size: 1.2rem; font-weight: 800; margin: 0; color: #241a28; line-height: 1.25; }
.pc-ubicacion { margin: 0; font-size: .88rem; color: #5d5464; display: flex; gap: 6px; align-items: baseline; }
.pc-ubicacion i { color: #9A5C9A; }
.pc-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .85rem; color: #5d5464; }
.pc-meta i { color: #9A5C9A; margin-right: 4px; }
.pc-tipo-unidad { background: #f3eef4; color: #7B3F7B; border-radius: 6px; padding: 2px 8px; font-size: .76rem; font-weight: 600; }
.pc-avance { display: flex; align-items: center; gap: 10px; }
.pc-avance-barra { flex: 1; height: 6px; border-radius: 999px; background: #eee7ef; overflow: hidden; }
.pc-avance-barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3FC38C, #2ea87a); }
.pc-avance small { font-size: .75rem; color: #5d5464; white-space: nowrap; }
.pc-precios { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-top: auto; padding-top: 8px; }
.pc-precio { background: #f6f3f7; border-radius: 12px; padding: 10px 12px; }
.pc-precio small { display: block; font-size: .72rem; color: #5d5464; font-weight: 500; }
.pc-precio strong { font-size: 1.2rem; font-weight: 800; color: #7B3F7B; }
.pc-precio--arriendo { background: #ecf8f2; }
.pc-precio--arriendo strong { color: #2ea87a; }
.pc-precio strong span { font-size: .78rem; font-weight: 600; margin-left: 2px; }
.pc-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 20px 18px;
  margin-top: 10px; border-top: 1px solid #f0eaf1; font-size: .82rem;
}
.pc-inmob { color: #5d5464; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-cta { font-weight: 700; color: #2ea87a; white-space: nowrap; }
.pc-cta i { transition: transform .2s; }
.pc:hover .pc-cta i { transform: translateX(4px); }

/* Estado vacío */
.pl-vacio { text-align: center; background: #fff; border-radius: 20px; border: 1.5px dashed var(--line); padding: 48px 20px; }
.pl-vacio-icono {
  width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #fff; background: linear-gradient(135deg, var(--p2), var(--p));
}
.pl-vacio h3 { font-weight: 800; font-size: 1.25rem; }
.pl-vacio p { color: var(--muted); max-width: 480px; margin: 0 auto 20px; }
.pl-vacio-acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Botones */
.pl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 12px;
  font-weight: 700; text-decoration: none; color: #fff; background: linear-gradient(135deg, var(--g2), var(--g-deep));
  box-shadow: 0 8px 22px rgba(46, 168, 122, .3); transition: transform .15s, box-shadow .15s; border: 0;
}
.pl-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(46, 168, 122, .4); }
.pl-btn--claro { background: #fff; color: var(--p); border: 1.5px solid var(--p2); box-shadow: none; }
.pl-btn--claro:hover { color: var(--p); background: #f6f0f7; box-shadow: none; }
.pl-btn--wa { background: #25D366; box-shadow: 0 8px 22px rgba(37, 211, 102, .3); }
.pl-btn--blanco { background: #fff; color: var(--p); box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }
.pl-btn--blanco:hover { color: var(--p); }

/* ── Por qué ── */
.pl-porque { background: #fff; padding: clamp(48px, 7vw, 80px) 0; border-top: 1px solid var(--line); }
.pl-eyebrow { text-align: center; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--p-titulo); margin: 0 0 8px; }
.pl-eyebrow--verde { color: var(--g-deep); text-align: left; }
.pl-eyebrow--claro { color: rgba(255, 255, 255, .75); text-align: left; }
.pl-sec-titulo { text-align: center; font-weight: 800; font-size: clamp(1.5rem, 3.2vw, 2.2rem); letter-spacing: -.02em; margin: 0 auto 36px; max-width: 720px; color: var(--ink); }
.pl-beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.pl-bene {
  position: relative; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: 18px;
  padding: 24px 22px; transition: transform .2s, box-shadow .2s;
}
.pl-bene::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--g2), var(--p2));
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.pl-bene:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(47, 31, 53, .1); }
.pl-bene:hover::after { transform: scaleX(1); }
.pl-bene-ico {
  width: 50px; height: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: #fff; margin-bottom: 14px; background: linear-gradient(135deg, var(--g2), var(--g-deep));
  box-shadow: 0 8px 18px rgba(46, 168, 122, .3);
}
.pl-bene:nth-child(even) .pl-bene-ico { background: linear-gradient(135deg, var(--p2), var(--p)); box-shadow: 0 8px 18px rgba(123, 63, 123, .28); }
.pl-bene h3 { font-size: 1.05rem; font-weight: 800; margin: 0 0 6px; color: var(--ink); }
.pl-bene p { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.55; }

/* ── Requerimiento ── */
.pl-req {
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 24px 40px; align-items: center;
  margin: clamp(48px, 7vw, 72px) 0; padding: clamp(24px, 4vw, 40px); border-radius: 24px;
  background: linear-gradient(135deg, #e9f7f0 0%, #f4eef6 100%); border: 1px solid #dcefe5;
}
.pl-req h2 { font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0 0 8px; color: var(--ink); }
.pl-req p:not(.pl-eyebrow) { margin: 0; color: var(--muted); max-width: 560px; }
.pl-req-acciones { display: flex; flex-direction: column; gap: 10px; }

/* ── Banda constructoras (como la de la home) ── */
.pl-banda { background: linear-gradient(135deg, #6b4f6b 0%, #7B3F7B 60%, #9A5C9A 100%); color: #fff; padding: clamp(36px, 6vw, 56px) 0; }
.pl-banda-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.pl-banda h2 { color: #fff; font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 6px; }
.pl-banda p:not(.pl-eyebrow) { margin: 0; color: rgba(255, 255, 255, .85); max-width: 560px; }

@media (max-width: 960px) {
  .pl-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .pl-destacado { transform: none; max-width: 520px; }
  .pl-req { grid-template-columns: 1fr; }
  .pl-req-acciones { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .pl-campos { grid-template-columns: 1fr; }
  /* En móvil el destacado empujaría el buscador fuera de pantalla y ya sale en la lista. */
  .pl-destacado { display: none; }
  .pl-hero { padding-bottom: 88px; }
  .pl-btn-buscar { justify-content: center; }
  .pl-segmento { display: flex; }
  .pl-segmento label { flex: 1; text-align: center; }
  .pl-segmento span { padding: 7px 6px; }
  .pc-grid { grid-template-columns: 1fr; }
  .pl-stats dd { font-size: 1.7rem; }
  .pl-req-acciones .pl-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Página de un proyecto (/proyectos/<slug>/)
   Reutiliza los tokens y piezas del listado (.pl, .pl-hero, .pl-stats,
   .pl-btn, .pl-banda) para que las dos páginas se sientan una sola.
   ══════════════════════════════════════════════════════════════════════════ */
/* La base del sitio pone overflow-x: hidden en html y body, y eso vuelve a
   body un contenedor de scroll que nunca se desplaza: ningún sticky funciona.
   Solo en esta página se cambia por clip, que recorta igual sin ese efecto. */
html:has(.pd), body:has(.pd) { overflow-x: clip; }

.pd-barra-admin { background: #fff7e6; border-bottom: 1px solid #f6d58e; font-size: .88rem; color: #744210; }
.pd-barra-admin .pl-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 9px; }
.pd-barra-admin i { margin-right: 6px; }
.pd-barra-admin a { color: #7B3F7B; font-weight: 700; text-decoration: none; }

/* ── Hero ── */
.pd-hero { padding-bottom: clamp(40px, 6vw, 64px); }
.pd-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 44px; align-items: center; }
.pd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff;
}
.pd-chip--verde { background: rgba(63, 195, 140, .18); border-color: rgba(63, 195, 140, .45); color: #b9f0d7; }
.pd-chip--ambar { background: rgba(246, 196, 83, .16); border-color: rgba(246, 196, 83, .45); color: #ffe3a3; }
.pd-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin: 16px 0 10px; }
.pd-ubicacion { color: rgba(255, 255, 255, .82); margin: 0 0 4px; display: flex; gap: 8px; align-items: baseline; }
.pd-ubicacion i { color: var(--g2); }
.pd-comercializa { color: rgba(255, 255, 255, .6); font-size: .88rem; margin: 0; }
.pd-comercializa a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.pd-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 14px 28px; margin-top: 24px; }
.pd-stats dd { font-size: 1.6rem; white-space: nowrap; }
.pd-hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pd-btn-vidrio { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); box-shadow: none; backdrop-filter: blur(6px); }
.pd-btn-vidrio:hover { background: rgba(255, 255, 255, .18); box-shadow: none; }

/* Galería mosaico */
.pd-galeria {
  position: relative; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px;
  padding: 10px; border-radius: 22px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35); aspect-ratio: 16/10;
}
.pd-foto { position: relative; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: #2f1f35; min-height: 0; }
.pd-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.pd-foto:hover img { transform: scale(1.05); }
.pd-foto--principal { grid-row: 1 / span 2; }
.pd-galeria:has(.pd-foto:only-of-type) { grid-template-columns: 1fr; }
.pd-foto-mas {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(30, 21, 35, .55); color: #fff; font-weight: 800; font-size: 1.2rem;
}
.pd-galeria-contador {
  position: absolute; left: 22px; bottom: 22px; display: inline-flex; gap: 6px; align-items: center; padding: 5px 11px;
  border-radius: 999px; background: rgba(20, 10, 25, .55); color: #fff; font-size: .8rem; font-weight: 600; pointer-events: none;
}

/* ── Pestañas de secciones ── */
.pd-tabs {
  position: sticky; top: var(--pd-header, 62px); z-index: 20; background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.pd-tabs .pl-wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; align-items: center; }
.pd-tabs .pl-wrap::-webkit-scrollbar { display: none; }
.pd-tabs a {
  flex: none; padding: 15px 14px; font-weight: 600; font-size: .92rem; color: var(--muted); text-decoration: none;
  border-bottom: 3px solid transparent; transition: color .15s, border-color .15s;
}
.pd-tabs a:hover, .pd-tabs a.activo { color: var(--p); border-bottom-color: var(--p2); }
.pd-tabs a.pd-tabs-cta {
  margin-left: auto; padding: 8px 18px; border-radius: 999px; border: 0; color: #fff;
  background: linear-gradient(135deg, var(--g2), var(--g-deep));
}
.pd-tabs a.pd-tabs-cta:hover { color: #fff; }

/* ── Layout ── */
.pd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 36px; align-items: start; padding-block: 36px 64px; }
.pd-seccion { scroll-margin-top: 130px; margin-bottom: 52px; }
.pd-seccion h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-weight: 800; color: var(--ink); margin: 0 0 18px; letter-spacing: -.01em; }
.pd-eyebrow { text-align: left; margin-bottom: 4px; }
.pd-seccion-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 16px; }
.pd-seccion-head h2 { margin: 0; }
.pd-avance { min-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.pd-avance small { color: var(--muted); }
.pd-avance b { color: var(--g-deep); }

/* Filtros de unidades */
.pd-filtros { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 18px; }
.pd-segmento { margin: 0; background: #fff; border: 1px solid var(--line); }
.pd-segmento input:checked + span { background: var(--p); color: #fff; box-shadow: none; }
.pd-tipos { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-tipo {
  border: 1.5px solid var(--line); background: #fff; color: var(--muted); border-radius: 999px; padding: 6px 14px;
  font-size: .85rem; font-weight: 600; transition: all .15s;
}
.pd-tipo:hover { border-color: var(--g); color: var(--g-deep); }
.pd-tipo.activo { background: var(--g); border-color: var(--g); color: #fff; }
.pd-orden { margin: 0 0 0 auto; }
.pd-orden select {
  height: 40px; border-radius: 10px; border: 1.5px solid var(--line); padding: 0 12px; background: #fff;
  font-size: .88rem; color: var(--ink); font-family: inherit;
}
.pd-sin-filtro { text-align: center; color: var(--muted); padding: 24px; background: #fff; border-radius: 16px; border: 1.5px dashed var(--line); }
.pd-sin-filtro button { border: 0; background: none; color: var(--p); font-weight: 700; text-decoration: underline; }

/* Tarjeta de unidad */
.pu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.pu {
  position: relative; display: flex; flex-direction: column; gap: 12px; background: #fff; border-radius: 18px; padding: 18px;
  border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(47, 31, 53, .05); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pu::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, var(--g2), var(--p2)); opacity: 0; transition: opacity .2s;
}
.pu:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(47, 31, 53, .13); border-color: transparent; }
.pu:hover::before { opacity: 1; }
.pu--reservada { background: #fbfafb; }
.pu--reservada .pu-nombre, .pu--reservada .pu-precios { opacity: .6; }
.pu-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pu-nombre { font-size: 1.2rem; font-weight: 800; margin: 0; color: var(--p); }
.pu-sub { font-size: .82rem; color: var(--muted); }
.pu-badge {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; background: #ecf8f2; color: var(--g-deep);
}
.pu-badge--reservada { background: #fff4dc; color: #a26a00; }
.pu-datos { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .84rem; color: var(--muted); }
.pu-datos i { color: var(--p2); margin-right: 5px; }
.pu-datos b { color: var(--ink); }
.pu-precios { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.pu-detalle { margin: -4px 0 0; font-size: .78rem; color: var(--muted); min-height: 1em; }
.pu-combinable { margin: -6px 0 0; font-size: .8rem; color: var(--p); font-weight: 600; }
.pu-combinable i { margin-right: 5px; }
.pu-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.pu-acciones .pl-btn { padding: 10px 12px; font-size: .88rem; box-shadow: none; }

/* Descripción */
.pd-descripcion { font-size: 1.02rem; line-height: 1.75; color: #3d3443; max-width: 760px; }

/* Ficha técnica en mosaicos */
.pd-ficha { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.pd-dato {
  display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px;
}
.pd-dato i {
  grid-row: 1 / span 2; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, var(--p2), var(--p));
}
.pd-dato:nth-child(even) i { background: linear-gradient(135deg, var(--g2), var(--g-deep)); }
.pd-dato span { font-size: .76rem; color: var(--muted); }
.pd-dato b { font-size: 1rem; color: var(--ink); line-height: 1.25; }
.pd-subtitulo { font-size: 1.05rem; font-weight: 800; color: var(--ink); margin: 26px 0 12px; }
.pd-amenidades { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pd-amenidades li { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font-weight: 500; }
.pd-amenidades i { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: #fff; background: var(--g2); flex: none; }

/* Mapa */
.pd-mapa-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.pd-mapa { height: 340px; }
.pd-mapa-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; }
.pd-mapa-pie > div { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: .92rem; }
.pd-mapa-pie > div i { color: var(--p2); margin-top: 4px; }
.pd-mapa-pie b { color: var(--ink); }
.pd-mapa-pie .pl-btn { padding: 10px 18px; }
.pd-pin span {
  width: 44px; height: 44px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--p2), var(--p)); border: 3px solid #fff; box-shadow: 0 6px 16px rgba(123, 63, 123, .45);
}
.pd-pin i { transform: rotate(45deg); color: #fff; font-size: 1rem; }

/* ── Contacto ── */
.pd-lateral { position: sticky; top: calc(var(--pd-header, 62px) + 70px); display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 130px; }
.pd-contacto { background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(47, 31, 53, .12); }
.pd-contacto-head {
  position: relative; overflow: hidden; padding: 22px 22px 20px; color: #fff;
  background: radial-gradient(120% 140% at 90% 0%, #5c3a63 0%, #2f1f35 70%);
}
.pd-contacto-head::after {
  content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; right: -80px; top: -90px;
  background: radial-gradient(circle, var(--g2), transparent 70%); opacity: .4; filter: blur(30px);
}
.pd-contacto-head > * { position: relative; z-index: 1; }
.pd-contacto-head h2 { color: #fff; font-weight: 800; font-size: 1.3rem; margin: 12px 0 6px; }
.pd-contacto-head p { margin: 0; color: rgba(255, 255, 255, .78); font-size: .9rem; }
.pd-contacto-head .pl-chip-vivo { font-size: .75rem; padding: 4px 11px; }
.pd-check { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: var(--g2); }
.pd-contacto-body { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.pd-form-par { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.pd-form-par .pd-campo label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-mas { border: 1px dashed var(--line); border-radius: 12px; padding: 4px 12px; margin: 2px 0 12px; }
.pd-mas summary { cursor: pointer; padding: 8px 0; font-size: .86rem; font-weight: 600; color: var(--p); list-style: none; }
.pd-mas summary::-webkit-details-marker { display: none; }
.pd-mas summary i { margin-right: 6px; transition: transform .2s; }
.pd-mas[open] summary i { transform: rotate(45deg); }
.pd-mas summary small { color: var(--muted); font-weight: 500; }
.pd-mas[open] { padding-bottom: 6px; }
.pd-campo { margin-bottom: 10px; min-width: 0; }
.pd-campo label { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.pd-campo .form-control {
  border-radius: 10px; border: 1.5px solid var(--line); padding: 9px 12px; font-size: .92rem; background: #fcfbfc;
}
.pd-campo .form-control:focus { border-color: var(--p2); box-shadow: 0 0 0 3px rgba(154, 92, 154, .14); background: #fff; }
.pd-campo textarea.form-control { min-height: 70px; }
.pd-campo .errorlist { list-style: none; padding: 0; margin: 4px 0 0; color: #c53030; font-size: .78rem; }
.pd-btn-full { width: 100%; }
.pd-legal { font-size: .74rem; color: var(--muted); margin: 8px 0 0; text-align: center; }
.pd-banda-acciones { display: flex; flex-wrap: wrap; gap: 10px; }

/* Barra fija en móvil */
.pd-barra-movil { display: none; }

/* Visor de fotos */
.pd-visor {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(16, 10, 20, .92); padding: 20px;
}
.pd-visor[hidden] { display: none; }
.pd-visor figure { margin: 0; max-width: min(1100px, 100%); text-align: center; }
.pd-visor img { max-width: 100%; max-height: 80vh; border-radius: 12px; }
.pd-visor figcaption { color: rgba(255, 255, 255, .7); margin-top: 10px; font-size: .9rem; }
.pd-visor-cerrar, .pd-visor-nav {
  position: absolute; border: 0; color: #fff; background: rgba(255, 255, 255, .12); border-radius: 50%;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.pd-visor-cerrar { top: 18px; right: 18px; font-size: 1.8rem; }
.pd-visor-prev { left: 18px; }
.pd-visor-next { right: 18px; }
.pd-visor-cerrar:hover, .pd-visor-nav:hover { background: rgba(255, 255, 255, .25); }

@media (max-width: 1024px) {
  .pd-layout { grid-template-columns: 1fr; }
  .pd-lateral { position: static; max-width: 640px; }
}
@media (max-width: 900px) {
  .pd-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .pd-galeria { order: -1; }
}
@media (max-width: 640px) {
  .pd-galeria { aspect-ratio: 4/3; grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .pd-galeria .pd-foto:not(.pd-foto--principal) { display: none; }
  .pd-foto--principal { grid-row: auto; }
  .pd-stats { grid-template-columns: repeat(2, auto); }
  .pd-stats dd { font-size: 1.5rem; }
  .pd-hero-acciones .pl-btn { flex: 1; }
  .pd-tabs a.pd-tabs-cta { display: none; }
  .pd-orden { margin-left: 0; width: 100%; }
  .pd-orden select { width: 100%; }
  .pu-grid { grid-template-columns: 1fr; }
  .pd-visor-nav { top: auto; bottom: 18px; }
  .pd-barra-movil {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); box-shadow: 0 -6px 20px rgba(47, 31, 53, .12);
  }
  .pd-barra-movil .pl-btn { padding: 12px 16px; box-shadow: none; }
  .pd-barra-movil .pl-btn:last-child { flex: 1; }
  .pd { padding-bottom: 70px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Home: sección de proyectos y chip del hero (solo si hay proyectos
   publicados; esta hoja se carga en la home únicamente en ese caso).
   Va entre "Propiedades disponibles" (#faf7fc) y la banda morada: fondo
   blanco para separarla de las dos.
   ══════════════════════════════════════════════════════════════════════════ */
.ph { background: #fff; padding: clamp(44px, 6vw, 72px) 0; position: relative; overflow: hidden; }
.ph::before {
  content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -220px; top: -260px;
  background: radial-gradient(circle, rgba(63, 195, 140, .14), transparent 70%); pointer-events: none;
}
.ph-wrap { position: relative; max-width: 1060px; margin: 0 auto; padding: 0 16px; }
.ph-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: 26px; }
.ph-head > div { max-width: 620px; }
.ph-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  background: #ecf8f2; color: #2ea87a; font-size: .78rem; font-weight: 700;
}
.ph h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; color: #241a28; margin: 12px 0 8px; }
.ph-grad {
  background: linear-gradient(100deg, #2ea87a, #9A5C9A); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ph-head p { margin: 0; color: #5d5464; font-size: 1rem; line-height: 1.6; }
.ph-ver-todos {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 12px;
  font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(135deg, #3FC38C, #2ea87a);
  box-shadow: 0 8px 22px rgba(46, 168, 122, .3); transition: transform .15s, box-shadow .15s;
}
.ph-ver-todos:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(46, 168, 122, .4); }
.ph-ver-todos i { transition: transform .2s; }
.ph-ver-todos:hover i { transform: translateX(3px); }

/* Con uno o dos proyectos las tarjetas no deben quedar perdidas en una
   cuadrícula de tres columnas. */
.ph-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ph-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ph-grid--1 { grid-template-columns: 1fr; }
.ph-grid--1 .pc { flex-direction: row; flex-wrap: wrap; }
.ph-grid--1 .pc-media { flex: 1 1 54%; aspect-ratio: auto; min-height: 320px; }
.ph-grid--1 .pc-body { flex: 1 1 40%; padding: 26px 28px 8px; }
.ph-grid--1 .pc-nombre { font-size: 1.5rem; }
.ph-grid--1 .pc-footer { flex: 1 1 100%; }

/* Chip del hero: mismo formato que los verdes, en morado para que destaque */
.quick-filter.quick-filter--proyectos {
  /* inline como los chips verdes: con inline-flex quedaba 5 px más abajo */
  background: linear-gradient(135deg, #9A5C9A, #7B3F7B); border-color: #7B3F7B; color: #fff;
  box-shadow: 0 6px 16px rgba(123, 63, 123, .3);
}
.quick-filter.quick-filter--proyectos:hover { background: #7B3F7B; color: #fff; }
.quick-filter--proyectos i { margin-right: 6px; }
.quick-filter--proyectos span {
  display: inline-block; vertical-align: 1px; margin-left: 6px; line-height: 1.5;
  font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  background: #3FC38C; color: #fff; border-radius: 999px; padding: 1px 7px;
}

@media (max-width: 900px) {
  .ph-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-grid--1 .pc { flex-direction: column; }
  .ph-grid--1 .pc-media { min-height: 0; aspect-ratio: 16/10; flex-basis: auto; }
}
@media (max-width: 640px) {
  .ph-grid--3, .ph-grid--2 { grid-template-columns: 1fr; }
  .ph-ver-todos { width: 100%; justify-content: center; }
}