/* Ficha de propiedad — layout estilo ONE Sotheby's (sep-2026).
   Columna izquierda: título, tira de datos clave, acciones, descripción y
   "Detalles de la propiedad" colapsable (agrupado por tipo de tag de Tokko).
   Columna derecha: card del agente (sticky en desktop) + alerta de precio.
   Cargado con ?v= (mtime) desde ficha.php. */

.fichaV2 { align-items: flex-start; }
.fichaV2 .grilla2A { width: 60%; }
.fichaV2 .grilla2B { width: 34%; margin-left: auto; }

.fichaMain { padding-top: 50px; padding-bottom: 70px; color: #222; }

.fichaBadge {
  font-size: 11px; letter-spacing: 3px; font-weight: 500; color: #c29b40;
  text-transform: uppercase; margin-bottom: 14px;
}

.fichaTitulo {
  font-size: 34px; line-height: 1.2; color: #000; font-weight: 400; margin: 0;
}
.fichaTitulo .fichaUbic { display: block; font-size: 0.78em; color: #333; margin-top: 6px; }
.fichaTitulo .fichaUbic .sep { color: #c29b40; padding: 0 6px; font-weight: 300; }

/* Tira de datos clave: precio | dorms | baños | ... separados por línea vertical */
.fichaStats {
  display: flex; flex-wrap: wrap; margin-top: 36px; border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6; padding: 6px 0;
}
.fichaStat {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px 26px 14px 0; margin-right: 26px; border-right: 1px solid #e6e6e6;
}
.fichaStat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.fichaStat-valor { font-size: 26px; line-height: 1.1; color: #000; white-space: nowrap; }
.fichaStat-valor small { font-size: 0.62em; }
.fichaStat-label {
  font-size: 11px; letter-spacing: 2px; font-weight: 500; color: #c29b40;
  text-transform: uppercase; margin-top: 8px; white-space: nowrap;
}

.fichaAcciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; align-items: center; }
.fichaAcciones .botonesficha {
  margin-right: 0; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  line-height: 1; padding: 12px 18px; min-height: 40px;
}
.fichaAcciones .botonesficha > i, .fichaAcciones .botonesficha > svg { padding: 0 !important; margin: 0 !important; vertical-align: 0 !important; }

.fichaH2 {
  font-size: 22px; letter-spacing: 3px; text-transform: uppercase; color: #000;
  font-weight: 400; margin: 0;
}

.fichaDesc { margin-top: 48px; }
.fichaDesc-texto { margin-top: 18px; font-size: 16px; line-height: 1.8; color: #444; font-weight: 300; }

/* Detalles colapsables (<details> nativo: sin JS, indexable) */
.fichaDetalles { margin-top: 44px; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; }
.fichaDetalles > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; padding: 22px 0; user-select: none;
}
.fichaDetalles > summary::-webkit-details-marker { display: none; }
.fichaDetalles-icono {
  position: relative; width: 20px; height: 20px; flex: 0 0 20px; margin-left: 20px;
}
.fichaDetalles-icono::before, .fichaDetalles-icono::after {
  content: ""; position: absolute; background: #002147; left: 0; top: 9px;
  width: 20px; height: 2px; transition: transform .25s;
}
.fichaDetalles-icono::after { transform: rotate(90deg); }
.fichaDetalles[open] .fichaDetalles-icono::after { transform: rotate(0); }

.fichaDetalles-body {
  border: 1px solid #dcdcdc; border-radius: 28px; padding: 32px 36px; margin-bottom: 28px;
}
.fichaGrupo { margin: 0 0 14px; font-size: 18px; color: #000; font-weight: 400; }
.fichaGrupo + .fichaGrupo, .fichaKV + .fichaGrupo, .fichaTags + .fichaGrupo, .fichaTexto + .fichaGrupo { margin-top: 34px; }

.fichaKV {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 10px; margin: 0;
}
.fichaKV > div { display: flex; gap: 8px; font-size: 16px; line-height: 1.5; color: #333; }
.fichaKV dt { color: #666; font-weight: 300; flex: 0 0 auto; }
.fichaKV dt::after { content: ":"; }
.fichaKV dd { margin: 0; color: #000; }

.fichaTags {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 10px;
}
.fichaTags li { font-size: 15px; line-height: 1.45; color: #333; padding-left: 20px; position: relative; font-weight: 300; }
.fichaTags li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px;
  border-radius: 50%; background: #c29b40;
}
.fichaTexto { font-size: 15px; line-height: 1.7; color: #333; font-weight: 300; }
.fichaTexto a { color: #002147; }

/* Columna derecha: card del agente (foto a la izquierda, datos y botones a la
   derecha alineados a la derecha, como "Exclusively Listed By" de ONE). */
.fichaAside { position: sticky; top: 140px; padding-top: 50px; }
.fichaAgente {
  border: 1px solid #cfcfcf; border-radius: 34px; padding: 30px 24px 26px; background: #fff;
}
.fichaAgente-titulo { font-size: 28px; color: #000; line-height: 1.2; text-align: center; }
.fichaAgente-row { display: flex; gap: 18px; align-items: flex-start; margin-top: 22px; }
/* Segundo agente (manual vinculado, p.ej. equipo de dos) debajo del primero. */
.fichaAgente-row + .fichaAgente-row { margin-top: 22px; padding-top: 22px; border-top: 1px solid #e6e6e6; }
.fichaAgente-col { flex: 0 0 46%; min-width: 0; }
/* La foto se muestra entera, con su proporción original (Tokko las sube en
   retrato 2:3, algunas con fondo propio): sólo esquinas redondeadas, sin recorte. */
.fichaAgente-foto { border-radius: 30px; overflow: hidden; }
.fichaAgente-foto img { width: 100%; height: auto; display: block; }
.fichaAgente-foto--logo {
  aspect-ratio: 2 / 3; background: #002147; display: flex; align-items: center; justify-content: center;
}
.fichaAgente-foto img.logo { width: 60%; height: auto; opacity: .92; }
.fichaAgente-perfil {
  display: inline-block; margin-top: 12px; font-size: 12px; letter-spacing: .06em;
  color: #002147; text-decoration: underline; text-underline-offset: 3px;
}
.fichaAgente-perfil:hover { color: #c29b40; }
.fichaAgente-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: stretch; text-align: left; }
.fichaAgente-nombre { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: #002147; font-weight: 500; line-height: 1.35; }
.fichaAgente-cargo { margin-top: 3px; font-size: 11px; letter-spacing: 1px; color: #888; text-transform: uppercase; }
.fichaAgente-tel { display: block; margin-top: 6px; font-size: 16px; color: #002147; text-decoration: none; font-weight: 700; letter-spacing: .5px; }
.fichaAgente-mail { display: block; margin-top: 4px; font-size: 12px; color: #555; text-decoration: none; overflow-wrap: anywhere; }
.fichaAgente-dir { margin-top: 8px; font-size: 13px; line-height: 1.5; color: #555; font-weight: 300; }
.fichaAgente-btns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.fichaBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid #002147; border-radius: 999px; padding: 0 14px; min-height: 42px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #002147;
  text-decoration: none; background: #fff; transition: .3s; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.fichaBtn:hover { background: #002147; color: #fff; }
.fichaBtn-wa { border-color: #25d366; color: #1a9e4c; }
.fichaBtn-wa:hover { background: #25d366; border-color: #25d366; color: #fff; }
.fichaAside .alertaPrecio { margin-top: 18px; text-align: center; }

@media (max-width: 1100px) {
  /* Una sola columna. La card del agente se intercala entre los botones y la
     descripción (como ONE en mobile): grilla2A/fichaMain pasan a display:contents
     para que sus hijos sean items directos del flex y se puedan ordenar. */
  .fichaV2 { flex-direction: column; align-items: stretch; }
  .fichaV2 .grilla2A, .fichaMain { display: contents; }
  .fichaBadge, .fichaTitulo, .fichaStats, .fichaAcciones, .fichaDesc, .fichaDetalles { width: 100%; }
  .fichaV2 .grilla2B { width: 100%; margin-left: 0; order: 2; }
  .fichaBadge, .fichaTitulo, .fichaStats, .fichaAcciones { order: 1; }
  .fichaDesc, .fichaDetalles { order: 3; }
  .fichaBadge, .fichaTitulo:first-child { margin-top: 40px; }
  .fichaDetalles { margin-bottom: 60px; }
  .fichaAside { position: static; padding-top: 40px; }
  .fichaAgente { max-width: 480px; margin: 0 auto; }
  /* Datos clave como ONE en tablet/mobile: 2 columnas iguales, centradas, con
     divisor vertical sólo entre columnas. */
  .fichaStats { display: grid; grid-template-columns: 1fr 1fr; border-top: 0; border-bottom: 0; padding: 0; margin-top: 30px; }
  .fichaStat { padding: 12px 10px; margin: 0; align-items: center; text-align: center; border-right: 0; }
  .fichaStat:nth-child(odd) { border-right: 1px solid #e6e6e6; }
  .fichaStat:last-child { padding-right: 10px; }
  .fichaAcciones { justify-content: center; }
  .fichaAcciones .botonesficha { flex: 1 1 auto; justify-content: center; min-width: 150px; max-width: 260px; }
  .fichaKV { grid-template-columns: 1fr; }
  .fichaTags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .fichaMain { padding-top: 30px; }
  .fichaTitulo { font-size: 27px; }
  .fichaStat { padding: 12px 6px; }
  .fichaStat-valor { font-size: 20px; }
  .fichaAcciones { flex-direction: column; align-items: stretch; }
  .fichaAcciones .botonesficha { width: 100%; max-width: none; min-height: 46px; }
  .fichaStat-label { font-size: 10px; letter-spacing: 1.5px; white-space: normal; }
  .fichaH2 { font-size: 17px; letter-spacing: 2px; }
  .fichaDetalles-body { padding: 22px 20px; border-radius: 20px; }
  .fichaTags { grid-template-columns: 1fr; }
  .fichaV2 .grilla2A { flex-direction: column; }
}