/* ============================================================
   SÁNCHEZ REYES — landing.css
   COMPLEMENTO de styles.css, no lo sustituye: aquí viven solo
   las secciones que la portada nueva agrega al diseño del sitio
   (índice para dueños, banda, salidas y mosaico de disponibles).
   Todo se apoya en los tokens de styles.css para que la piel siga
   siendo la misma. Cargar SIEMPRE después de styles.css.
   ============================================================ */

/* ── Coreografía de entrada del hero ──
   Solo se oculta si hay JS (html.js-anim); sin JS nada se esconde. */
html.js-anim .entra {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  animation: entraSeguridad 0.01s 4s forwards;   /* red de seguridad */
}
@keyframes entraSeguridad { to { opacity: 1; transform: none; } }
html.js-anim body.listo .entra { opacity: 1; transform: none; }
.entra.e1 { transition-delay: 0.15s; }
.entra.e2 { transition-delay: 0.95s; }
.entra.e3 { transition-delay: 1.1s; }
.entra.e4 { transition-delay: 1.25s; }

/* Titular por palabras: el texto va completo en el HTML y JS lo envuelve */
.palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-top: 0.1em;      /* aire para que los acentos no se recorten */
  margin-top: -0.1em;
}
.palabra-int {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
body.listo .palabra-int { transform: translateY(0); }

/* Nota bajo los botones del hero */
.hero-nota {
  font-size: 1.06rem;
  font-weight: 300;
  color: var(--cream-2);
  border-left: 1px solid var(--line-gold);
  padding-left: 16px;
  max-width: 46ch;
  margin-top: 28px;
  line-height: 1.6;
}
.hero-nota strong { color: var(--cream-2); font-weight: 500; }

/* ═══════════════════════════════════════════
   PARA DUEÑOS — índice de filas
   ═══════════════════════════════════════════ */
.propietarios {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.propietarios-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 130px) clamp(24px, 4vw, 64px);
}
.propietarios-entrada {
  font-size: clamp(1.08rem, 1.5vw, 1.32rem);
  font-weight: 300;
  color: var(--cream-2);
  line-height: 1.7;
  max-width: 54ch;
  margin: 20px auto 0;
}
.indice {
  border-top: 1px solid var(--line);
  margin-top: clamp(36px, 5vw, 60px);
}
.fila {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(16px, 4vw, 56px);
  align-items: start;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--line);
  transition: background 0.4s var(--ease-out);
}
.fila:hover { background: rgba(201,169,110,0.035); }
/* Regla dorada que se dibuja cuando la fila entra en pantalla */
.fila::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.fila.is-visible::after { transform: scaleX(1); }
.fila-titulo {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  font-weight: 300;
  line-height: 1.25;
  color: var(--cream);
}
.fila-texto {
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  font-weight: 300;
  color: var(--cream-2);
  line-height: 1.75;
  max-width: 58ch;
}
.fila-texto strong { color: var(--gold); font-weight: 500; }

/* Banda fotográfica a una tinta dorada */
.banda { position: relative; margin: clamp(44px, 5.5vw, 76px) 0 0; }
.banda img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  border: 1px solid var(--line-gold);
  border-radius: 2px;
}
.banda figcaption {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  font-weight: 300;
  color: var(--cream-2);
}
.banda figcaption strong { color: var(--cream); font-weight: 500; }
.banda figcaption .ref {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Las dos salidas: vender o rentar */
.salidas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(44px, 5.5vw, 76px);
}
.salida {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  transition: border-color 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.salida:hover { border-color: var(--line-gold); transform: translateY(-4px); }
.salida-titulo {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--gold);
  margin-bottom: 18px;
}
.salida ul { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; flex: 1; }
.salida li {
  font-size: 1.09rem;
  font-weight: 300;
  color: var(--cream-2);
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
}
.salida li::before {
  content: '◆';
  position: absolute;
  left: 0; top: 5px;
  font-size: 0.45rem;
  color: var(--gold);
}
.salida .servicio-cta { align-self: flex-start; }

/* ═══════════════════════════════════════════
   CASAS DISPONIBLES
   ═══════════════════════════════════════════ */
.inventario-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 130px) clamp(24px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
.inventario-texto h2 { margin-bottom: 20px; }
.inventario-texto > p {
  font-size: clamp(1.08rem, 1.5vw, 1.32rem);
  font-weight: 300;
  color: var(--cream-2);
  line-height: 1.75;
  max-width: 48ch;
  margin-bottom: 26px;
}
.inventario-texto > p strong { color: var(--cream); font-weight: 500; }
.marcas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.marca-chip {
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  padding: 9px 18px;
  border: 1px solid var(--line-gold);
  border-radius: 2px;
  color: var(--cream-3);
}
.inventario-acciones { display: flex; gap: 14px; flex-wrap: wrap; }

.mosaico {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  height: clamp(400px, 54vh, 560px);
}
.mosaico figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 2px;
  border: 1px solid var(--line);
}
.mosaico figure::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Funde el pie de cada foto con el fondo y baja el brillo de los bordes */
  background:
    linear-gradient(180deg, rgba(10,10,9,0.16) 0%, rgba(10,10,9,0) 38%, rgba(10,10,9,0.55) 100%),
    radial-gradient(120% 100% at 50% 45%, rgba(10,10,9,0) 55%, rgba(10,10,9,0.4) 100%);
  transition: opacity 0.6s var(--ease-out);
}
.mosaico figure:hover::after { opacity: 0.55; }
.mosaico figure:first-child { grid-row: span 2; }
.mosaico img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92);
  transition: transform 1s var(--ease-out), filter 0.6s;
}
.mosaico figure:hover img { transform: scale(1.06); filter: saturate(1.05); }

/* ── Responsive ── */
@media (max-width: 1000px) {
  .inventario-inner { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .fila { grid-template-columns: 1fr; gap: 10px; }
  .salidas { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .mosaico { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .mosaico figure { aspect-ratio: 4/3; }
  .mosaico figure:first-child { grid-row: span 1; grid-column: span 2; aspect-ratio: 16/10; }
  .banda img { aspect-ratio: 16/9; }
  .inventario-acciones .btn { width: 100%; justify-content: center; }
}

/* Táctiles: nada espera un hover que nunca llega */
@media (hover: none) and (pointer: coarse) {
  .fila::after { transform: scaleX(1); }
}
/* Reduced motion: solo lo intrusivo; los micro-efectos se quedan */
@media (prefers-reduced-motion: reduce) {
  .palabra-int { transition: none; transform: none; }
}

/* ── Foto de Nosotros: mismo velo que el mosaico, para que no flote
      sobre el fondo oscuro como una lámina pegada ── */
.nosotros-img-col { position: relative; }
.nosotros-img-col::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(10,10,9,0.1) 0%, rgba(10,10,9,0) 42%, rgba(10,10,9,0.46) 100%);
}

/* En pantallas chicas el interletrado de los botones los desborda y el icono
   se descuelga a un segundo renglón: se aprieta un poco. */
@media (max-width: 520px) {
  .btn { letter-spacing: 0.05em; padding-left: 20px; padding-right: 20px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ── CTA dorado en línea ──
   Sobre la foto del hero el relleno sólido pesa demasiado; el contorno deja
   respirar la imagen. Es el mismo patrón que ya usa el botón de la barra:
   en línea al reposo, relleno al pasar el cursor. El brillo que .btn-gold
   barre por dentro se apaga aquí, que sin fondo no tiene qué recorrer. */
.btn-gold-line {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
.btn-gold-line:hover {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.btn-gold-line::after { display: none; }

/* ═══════════════════════════════════════════
   HERO — más aire
   El kicker de zonas sale del flujo y se va al margen derecho: el titular
   arranca arriba del todo y el bloque de texto deja de sentirse apretado.
   ═══════════════════════════════════════════ */
.hero-kicker {
  position: absolute;
  top: calc(var(--nav-h) + 26px);
  right: clamp(24px, 6vw, 80px);
  margin: 0;
  max-width: 46%;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-align: right;
  line-height: 1.9;
  color: var(--gold);
  opacity: 0.8;
}
/* Con el kicker fuera, el titular puede empezar más arriba y respirar */
.hero-inner { padding-top: calc(var(--nav-h) + 76px); }
.hero-title { margin-bottom: 30px; }
.hero-sub { max-width: 44ch; margin-bottom: 44px; }
.hero-nota { margin-top: 34px; }

@media (max-width: 900px) {
  /* En pantalla angosta el margen derecho no da: vuelve al flujo, arriba y
     alineado a la derecha, para que siga sin robarle espacio al titular. */
  .hero-kicker {
    position: static;
    max-width: none;
    text-align: right;
    /* Justo lo necesario para que las cuatro zonas quepan en un renglón */
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    margin-bottom: 24px;
  }
  .hero-inner { padding-top: calc(var(--nav-h) + 34px); }
}

/* En el teléfono el titular a 2.8rem se come media pantalla y el hero se
   siente lleno. Bajarlo dos puntos deja ver la foto y da el respiro que
   Johan pidió, sin perder el peso del titular. */
@media (max-width: 700px) {
  .hero-title { font-size: clamp(2.3rem, 8.4vw, 3.1rem); }
  .hero-inner { padding-top: calc(var(--nav-h) + 52px); padding-bottom: 56px; }
  .hero-sub { margin-bottom: 34px; }
}