/* ==========================================================================
   EBEN PATRIMONIAL — LAYOUT DE PAGINA
   Secciones concretas del sitio corporativo y de las landings de propiedad.
   Depende de: tokens.css, base.css, components.css
   ========================================================================== */

/* ==========================================================================
   01 · LOCKUP DE MARCA (rombo + wordmark)

   Reproduce el "Logo Redes Sociales · sin marco" del Manual Edicion 2025:
   rombo a la izquierda, y a la derecha EBEN, filete, PATRIMONIAL y —solo en
   el pie— la bajada "Piedra angular del patrimonio familiar".

   Tres decisiones que conviene dejar escritas:

   1. El wordmark es TEXTO REAL, no imagen. Escala nitido, se puede
      seleccionar y copiar, lo lee un lector de pantalla y no suma peso.
   2. "EBEN" va en Montserrat, no en Cormorant. En el manual el wordmark es
      una sans geometrica de trazo ligero con las astas de la E iguales; la
      Cormorant es una serif y no se le parece. La Cormorant sigue siendo la
      tipografia de titulares del sitio, que es lo que el manual le asigna.
   3. El rombo va en Oro y el texto en Marfil: es la variante "Principal"
      (Navy + Oro + Blanco). Sobre fondo claro se usa .brand--onlight, que
      pasa todo a Navy — variante monocromatica, tambien del manual.
      Nunca el Oro como color de texto sobre claro: 2.08 de contraste.
   ========================================================================== */

.brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(var(--sp-2), 1.2vw, var(--sp-4));
  color: var(--brand-oro);
}

.brand__mark { display: block; flex: 0 0 auto; }
.brand__mark svg {
  display: block;
  width: clamp(34px, 31px + 0.8vw, 44px);
  height: auto;
  color: var(--brand-oro);
}

.brand__type {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  line-height: 1;
}

.brand__name {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.5rem);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wordmark);
  color: var(--brand-marfil);
}

/* Filete horizontal entre EBEN y PATRIMONIAL. Es un borde, no un caracter:
   asi ocupa exactamente el ancho del bloque y no se lee en voz alta. */
.brand__rule {
  display: block;
  margin: 0.34em 0 0.32em;
  border-top: var(--hairline) solid currentColor;
  opacity: 0.85;
}

.brand__sub {
  font-family: var(--font-body);
  font-size: clamp(0.5rem, 0.46rem + 0.14vw, 0.5938rem);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--brand-marfil);
  /* El tracking añade un hueco despues de la ultima letra; lo compensamos
     para que PATRIMONIAL quede opticamente alineado con EBEN. */
  margin-right: calc(var(--ls-widest) * -1);
}

/* Bajada — solo en el pie. En la nav sobra y roba altura en movil. */
.brand__tagline {
  display: none;
  font-family: var(--font-editorial);
  font-size: 0.6875rem;
  font-weight: var(--fw-regular);
  font-style: italic;
  letter-spacing: var(--ls-normal);
  color: var(--text-on-inverse-muted);
  margin-top: 0.5em;
}

/* Version del pie — mas grande, apilada y con bajada */
.brand--footer .brand__mark svg { width: 58px; }
.brand--footer .brand__name { font-size: var(--fs-xl); }
.brand--footer .brand__sub  { font-size: 0.625rem; }
.brand--footer .brand__tagline { display: block; font-size: 0.75rem; }

/* Version monocromatica sobre fondo claro */
.brand--onlight,
.brand--onlight .brand__mark svg,
.brand--onlight .brand__name,
.brand--onlight .brand__sub { color: var(--brand-navy); }
.brand--onlight .brand__tagline { color: var(--text-muted); }


/* ==========================================================================
   02 · HERO
   Fondo Onyx (portada Onyx del manual). Estructura sandwich: oscuro arriba,
   claro en el cuerpo, oscuro en el pie.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  min-height: 100vh;
  padding-top: calc(var(--nav-h) + var(--sp-12));
  padding-bottom: var(--sp-16);
  background-color: var(--brand-navy);
  color: var(--text-on-inverse);
  overflow: hidden;
}

/* Imagen de fondo */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Velo de legibilidad. Sin esto el texto sobre foto no pasa contraste. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(26,26,26,0.82) 0%,
      rgba(26,26,26,0.58) 38%,
      rgba(26,26,26,0.80) 78%,
      rgba(26,26,26,0.94) 100%);
}

/* Placeholder mientras no hay fotografia: textura sobria de la marca */
.hero__media--placeholder {
  background:
    radial-gradient(ellipse 80% 60% at 50% 15%, rgba(200,169,110,0.10), transparent 70%),
    linear-gradient(180deg, #1F1F1F 0%, #141414 100%);
}
.hero__media--placeholder::after { background: none; }

.hero__inner { position: relative; z-index: 1; width: 100%; }

.hero__content { max-width: 62ch; }

.hero__overline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-oro);
}
.hero__overline::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--brand-oro);
}

.hero__title {
  color: var(--brand-marfil);
  margin-bottom: var(--sp-6);
}
.hero__title em {
  font-style: italic;
  font-family: var(--font-editorial);
  color: var(--brand-oro);
}

.hero__lead {
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-normal);
  color: var(--brand-marfil);
  opacity: 0.86;
  max-width: 54ch;
  margin-bottom: var(--sp-10);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
@media (min-width: 480px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* Barra de credenciales al pie del hero */
.hero__strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-4);
  margin-top: var(--sp-16);
  padding-top: var(--sp-8);
  border-top: var(--hairline) solid var(--brand-oro-a24);
}
@media (min-width: 900px) {
  .hero__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8); }
}

.hero__stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  line-height: 1.1;
  color: var(--brand-oro);
  margin-bottom: var(--sp-1);
}
.hero__stat-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-azul-claro);
  line-height: var(--lh-normal);
}

/* Hero reducido para paginas internas */
.hero--interior {
  min-height: auto;
  padding-top: calc(var(--nav-h) + var(--sp-16));
  padding-bottom: var(--sp-16);
  align-items: center;
}


/* ==========================================================================
   03 · SECCION DE PROPIEDADES
   ========================================================================== */

.propiedades__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-12);
}
@media (min-width: 900px) {
  .propiedades__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-10);
  }
  .propiedades__head > div:first-child { max-width: 52ch; }
}

.propiedades__nota {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: var(--hairline) solid var(--border-hairline);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: var(--measure);
}


/* ==========================================================================
   04 · QUIENES SOMOS
   ========================================================================== */

.nosotros {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  align-items: start;
}
@media (min-width: 900px) {
  .nosotros { grid-template-columns: 1fr 1fr; gap: var(--sp-20); }
}

.nosotros__texto > * + * { margin-top: var(--sp-5); }
.nosotros__texto p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-on-inverse-muted);
  max-width: var(--measure);
}

/* Valores institucionales del manual */
.valores {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 560px) {
  .valores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); }
}

.valor__nombre {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight);
  color: var(--brand-oro);
  margin-bottom: var(--sp-2);
}
.valor__nombre::before {
  content: "";
  width: 6px; height: 6px;
  flex: 0 0 auto;
  border: 1px solid var(--brand-oro);
  transform: rotate(45deg);
}
.valor__texto {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-inverse-muted);
}


/* ==========================================================================
   05 · CONTACTO
   ========================================================================== */

.contacto {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-12);
  align-items: start;
}
@media (min-width: 1024px) {
  .contacto { grid-template-columns: 1fr 1.15fr; gap: var(--sp-20); }
}

.contacto__aside > * + * { margin-top: var(--sp-8); }

.contacto__bloque-titulo {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--sp-3);
}

.contacto__dato {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap-min);
  font-size: var(--fs-lg);
  color: var(--text-primary);
}
.contacto__dato svg {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--brand-oro-oscuro);
  stroke-width: 1.4;
}

.contacto__mapa {
  aspect-ratio: 16 / 10;
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-sunken);
}
.contacto__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

.contacto__form-wrap {
  padding: var(--sp-8) var(--sp-6);
  background-color: var(--surface-raised);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 640px) {
  .contacto__form-wrap { padding: var(--sp-10); }
}


/* ==========================================================================
   06 · BANDA DE CITA
   ========================================================================== */

.cita-banda {
  background-color: var(--brand-navy);
  color: var(--text-on-inverse);
  padding-block: var(--section-y);
}

/* Cuando la cita va pegada a otra seccion oscura, las dos se leen como una
   sola banda continua y la suma de sus margenes deja un hueco vacio enorme.
   Se recorta el respiro de ambas para que la cita funcione como entrada de la
   seccion siguiente en lugar de como bloque suelto. */
.cita-banda:has(+ .section--inverse) { padding-bottom: var(--section-y-tight); }
.cita-banda + .section--inverse { padding-top: var(--section-y-tight); }


/* ==========================================================================
   07 · LANDING DE PROPIEDAD
   Hereda todo el sistema. Solo agrega la galeria y la ficha tecnica.
   ========================================================================== */

.prop-hero__zona {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-oro);
}

.prop-hero__precio {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
  color: var(--brand-oro);
  margin-top: var(--sp-6);
}
.prop-hero__precio small {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-azul-claro);
}

/* Galeria */
.galeria {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
@media (min-width: 768px) {
  .galeria { grid-template-columns: repeat(4, 1fr); }
  .galeria__item:first-child { grid-column: span 4; }
  .galeria__item:nth-child(n+2) { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .galeria__item:nth-child(n+2) { grid-column: span 1; }
}

.galeria__item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}
.galeria__item:first-child { aspect-ratio: 16 / 9; }
.galeria__item img { width: 100%; height: 100%; object-fit: cover; }

/* Ficha tecnica */
.ficha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-4);
  padding: var(--sp-8);
  background-color: var(--surface-raised);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-sm);
}
@media (min-width: 768px) {
  .ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
}
@media (min-width: 1024px) {
  .ficha { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.ficha__dato dt {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
}
.ficha__dato dd {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Listas de atributos y entorno */
.lista-check { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 640px) { .lista-check { grid-template-columns: repeat(2, 1fr); } }

.lista-check li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.lista-check li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  margin-top: 0.6em;
  border: 1px solid var(--brand-oro-oscuro);
  transform: rotate(45deg);
}

/* Barra fija de accion en movil (landing de propiedad) */
.prop-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--gutter);
  background-color: var(--brand-navy-a88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: var(--hairline) solid var(--brand-oro-a24);
}
.prop-bar__precio {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--brand-oro);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.prop-bar .btn { flex: 1 1 auto; }

@media (min-width: 1024px) { .prop-bar { display: none; } }

/* Cuando existe la barra fija, el boton flotante sube y el body deja espacio */
body.has-prop-bar { padding-bottom: 76px; }
body.has-prop-bar .wa-float { bottom: calc(76px + var(--sp-4)); }
@media (min-width: 1024px) {
  body.has-prop-bar { padding-bottom: 0; }
  body.has-prop-bar .wa-float { bottom: var(--sp-8); }
}


/* ==========================================================================
   08 · MIGAS DE PAN
   ========================================================================== */

.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--brand-azul-claro);
}
.migas li { display: inline-flex; align-items: center; }
.migas a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--brand-azul-claro);
}
.migas a:hover { color: var(--brand-oro); }
.migas li:not(:last-child)::after { content: "/"; margin-left: var(--sp-2); opacity: 0.6; }
.migas [aria-current="page"] { color: var(--brand-marfil); }


/* ==========================================================================
   09 · PAGINA DE CONTENIDO LEGAL
   ========================================================================== */

.legal { max-width: 76ch; }
.legal > * + * { margin-top: var(--sp-5); }
.legal h2 {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  margin-top: var(--sp-12);
}
.legal h3 {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-top: var(--sp-8);
}
.legal p, .legal li {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.legal ul { display: flex; flex-direction: column; gap: var(--sp-3); padding-left: var(--sp-5); }
.legal ul li { position: relative; }
.legal ul li::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-5) * -1);
  top: 0.62em;
  width: 5px; height: 5px;
  border: 1px solid var(--brand-oro-oscuro);
  transform: rotate(45deg);
}