/* Ficha de propiedad (§6.11–13): badge de precio, fila de características y galería. */

/* ——— Badge de precio: siempre papel de marca, también en divisiones oscuras ——— */

.c-property-badge {
  display: inline-block;
  padding: var(--space-5) var(--space-7);
  background: var(--sl-paper);
  color: var(--sl-ink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  text-align: center;
}

.c-property-badge__label,
.c-property-badge .u-eyebrow {
  display: block;
  margin-block-end: var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--sl-gold-line);
  font-family: var(--ff-display);
  font-size: var(--fs-overline);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-caps-4);
  text-indent: var(--ls-caps-4);
  text-transform: uppercase;
  color: var(--sl-gold-deep);
}

.c-property-badge__price {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-price);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .04em;
  font-variant-numeric: lining-nums;
  color: var(--sl-gold-deep);
}

/* ——— Fila de características con divisores 1px (§6.13) ——— */

.c-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) 0;
  padding-block: var(--space-6);
}

@media (min-width: 640px) {
  .c-features {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}

.c-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  text-align: center;
}

.c-feature::before {
  content: '';
  position: absolute;
  inset-inline-start: -.5px;
  inset-block-start: 14%;
  width: 1px;
  height: 72%;
  background: var(--div-line);
}

/* Móvil 3 col: sin divisor al inicio de fila; escritorio: solo el primero. */
.c-features > .c-feature:nth-child(3n+1)::before {
  display: none;
}

@media (min-width: 640px) {
  .c-features > .c-feature:nth-child(3n+1)::before {
    display: block;
  }

  .c-features > .c-feature:first-child::before {
    display: none;
  }
}

.c-feature__icon {
  color: var(--div-accent);
}

.c-feature__icon svg {
  width: 32px;
  height: 32px;
}

.c-feature__value {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
  font-variant-numeric: lining-nums;
  color: var(--div-ink);
}

.c-feature__label {
  font-family: var(--ff-ui);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-caps-2);
  text-transform: uppercase;
  color: var(--div-ink-soft);
}

/* ——— Galería de ficha: 2 col, primera fila a todo el ancho, badge superpuesto ——— */

.c-property-gallery {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.c-property-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 640px) {
  .c-property-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-property-gallery > :first-child {
    grid-column: 1 / -1;
  }

  .c-property-gallery > :first-child img {
    aspect-ratio: 16 / 9;
  }
}

.c-property-gallery .c-property-badge {
  position: absolute;
  z-index: 1;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
}

@media (min-width: 640px) {
  .c-property-gallery .c-property-badge {
    inset-block-start: var(--space-6);
    inset-inline-end: var(--space-6);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Ficha de propiedad completa (flyer inmobiliario, INSTRUCCIONES/diseno-propiedad.jpg)
   Réplica: cabecera con título enorme, hero full-bleed con badge, y cuerpo a
   dos columnas (datos a la izquierda, galería a la derecha). División: estates.
   ═══════════════════════════════════════════════════════════════════════ */

.c-property {
  color: var(--div-ink);
}

/* ——— Cabecera: kicker + título gigante + referencia ——— */

.c-property__intro {
  margin-block-start: var(--space-5);
  margin-block-end: var(--space-7);
}

.c-property__kicker {
  /* Se combina con .u-eyebrow (versalitas oro --div-accent-strong). */
  margin-block-end: var(--space-4);
}

.c-property__title {
  margin: 0;
  /* En el flyer el título rompe en ~3 líneas: se limita el ancho de línea. */
  max-inline-size: 22ch;
  font-family: var(--ff-display);
  font-size: var(--fs-display-2);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--div-ink);
}

.c-property__ref {
  margin-block-start: var(--space-4);
  font-family: var(--ff-ui);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: var(--ls-caps-1);
  color: var(--div-ink-soft);
}

/* Número de referencia: texto pequeño ⇒ oro fuerte (nunca --div-accent claro, §8). */
.c-property__ref-num {
  color: var(--div-accent-strong);
  font-weight: 600;
}

/* ——— Hero full-bleed con badge superpuesto ——— */

.c-property-hero {
  position: relative;
  margin-block-end: var(--space-8);
}

.c-property-hero__media {
  margin: 0;
}

.c-property-hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* El hero del flyer es más panorámico que 16:9 (≈2.3:1). */
@media (min-width: 960px) {
  .c-property-hero__media img {
    aspect-ratio: 21 / 9;
  }
}

/* Móvil: el badge NO tapa la foto — se coloca estático, alineado a la derecha,
   justo debajo del hero. */
.c-property-hero .c-property-badge {
  display: block;
  width: max-content;
  margin-block-start: var(--space-5);
  margin-inline-start: auto;
  margin-inline-end: var(--gutter);
}

@media (min-width: 640px) {
  /* Escritorio: superpuesto sobre la imagen, a la derecha y algo descolgado
     del borde superior, como flota en el flyer. */
  .c-property-hero .c-property-badge {
    position: absolute;
    z-index: 1;
    inset-block-start: 12%;
    inset-inline-end: var(--space-7);
    min-inline-size: 11rem;
    margin: 0;
  }
}

@media (min-width: 960px) {
  .c-property-hero .c-property-badge {
    inset-inline-end: var(--space-9);
  }
}

/* ——— Cuerpo: datos (izq) + galería (der) ——— */

.c-property__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  margin-block-end: var(--space-9);
}

/* Iconos de métricas al tamaño del flyer (~40px), solo en la ficha. */
.c-property .c-feature__icon svg {
  width: 40px;
  height: 40px;
}

.c-property .c-features {
  padding-block: var(--space-7);
}

@media (min-width: 960px) {
  .c-property__body {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-areas:
      'aside contact'
      'aside gallery';
    gap: var(--space-9);
  }

  .c-property__aside { grid-area: aside; }
  .c-property__contact-col { grid-area: contact; }
  .c-property__gallery-col { grid-area: gallery; }
}

/* ≥1280px: tres columnas info | galería | contacto. El cuerpo se ensancha por
   encima del contenedor wide (breakout centrado, mismo truco que .l-bleed pero
   con tope) exactamente lo que ocupan la columna del formulario y su gap, de
   modo que las dos columnas originales conservan su tamaño. */
@media (min-width: 1280px) {
  .c-property__body {
    --contact-col-w: 22rem;
    --body-w: min(100vw - 2 * var(--gutter), var(--container-wide) + var(--space-9) + var(--contact-col-w));
    width: var(--body-w);
    margin-inline: calc((100% - var(--body-w)) / 2);
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, var(--contact-col-w));
    grid-template-areas: 'aside gallery contact';
  }

  /* La columna estira a la altura de la fila para que la tarjeta pueda
     acompañar el scroll (sticky) junto a galerías largas. */
  .c-property__contact-col {
    align-self: stretch;
  }

  .c-property__contact-col .c-property-contact {
    position: sticky;
    top: var(--space-6);
  }
}

.c-property__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.c-property__gallery-col {
  min-width: 0;
}

/* ——— Descripción (texto de lectura) ——— */

.c-property__desc {
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--div-ink);
}

.c-property__desc > :first-child {
  margin-block-start: 0;
}

.c-property__desc > :last-child {
  margin-block-end: 0;
}

/* ——— Encabezado de sección: versalitas oro + regla fina hasta el borde ——— */

.c-property-heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block-end: var(--space-5);
  font-family: var(--ff-display);
  font-size: var(--fs-overline);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--ls-caps-3);
  text-transform: uppercase;
  /* Texto pequeño ⇒ oro fuerte (§8). */
  color: var(--div-accent-strong);
}

/* En el flyer la regla es un guion corto tras el texto, no llega al borde. */
.c-property-heading::after {
  content: '';
  flex: 1;
  max-inline-size: var(--space-9);
  height: 1px;
  background: var(--div-line-strong);
}

/* ——— Checklist de características destacadas ——— */

.c-checklist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .c-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-6);
  }
}

.c-checklist__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--ff-text);
  /* Lista compacta, como en el flyer. */
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--div-ink);
}

/* Check dorado, alineado con la primera línea del texto (icono ⇒ oro claro OK, §8). */
.c-checklist__item .c-icon {
  --icon-size: 18px;
  flex: none;
  margin-block-start: 0.2em;
  color: var(--div-accent);
}

/* ——— Ubicación: pin grande + cuerpo con mapa ——— */

.c-property-location {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

/* En el flyer el pin va dentro de un aro fino. */
.c-property-location__pin {
  --icon-size: 24px;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--space-7);
  block-size: var(--space-7);
  margin-block-start: 0.1em;
  border: 1px solid var(--div-line-strong);
  border-radius: 50%;
  color: var(--div-accent);
}

.c-property-location__body {
  flex: 1;
  min-width: 0;
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--div-ink-soft);
}

.c-property-location__address {
  margin: 0 0 var(--space-2);
  font-family: var(--ff-display);
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: 1.3;
  color: var(--div-ink);
}

.c-property-location__map {
  margin-block-start: var(--space-5);
  min-height: 18rem;
  border: 1px solid var(--div-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.c-property-location__map .leaflet-container {
  min-height: 18rem;
}

/* ——— Galería de la ficha: mosaico del flyer ———
   1 foto grande arriba, rejilla de 2 columnas en medio y, si el número de
   fotos es par, la última se estira en panorámica (como el pie del flyer).
   Sin badge: el precio vive en el hero. */

.c-property__gallery-col .c-property-gallery {
  gap: var(--space-3);
}

.c-property__gallery-col .c-property-gallery > :first-child img {
  aspect-ratio: 16 / 10;
}

@media (min-width: 640px) {
  .c-property__gallery-col .c-property-gallery > :last-child:nth-child(even) {
    grid-column: 1 / -1;
  }

  .c-property__gallery-col .c-property-gallery > :last-child:nth-child(even) img {
    aspect-ratio: 21 / 9;
  }
}

.c-property-gallery__item {
  margin: 0;
}

.c-property-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ——— Formulario de contacto de la ficha (webform contacto_propiedad) ——— */

.c-property-contact {
  margin-block-end: var(--space-7);
  padding: var(--space-6) var(--space-6) var(--space-5);
  border: 1px solid var(--div-line);
  background: var(--div-surface);
}

.c-property-contact__lead {
  margin-block: 0 var(--space-5);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--div-ink-soft);
}