/* ============================================================
   Zentrium Agencia Inmobiliaria — Demo 2
   Estilos de Landings, Nosotros y Contacto
   (usa variables y componentes base de styles.css / pages.css)
   ============================================================ */

/* ---------- Hero de landing ---------- */
.lhero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + 4rem) 0 4.5rem; color: var(--surface); }
.lhero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.lhero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(26,24,20,.90) 0%, rgba(26,24,20,.62) 55%, rgba(26,24,20,.34) 100%); }
.lhero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.lhero__eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .28em; font-size: .76rem; font-weight: 700; color: var(--gold-soft); margin-bottom: 1.2rem; }
.lhero__title { font-family: var(--font-display); font-size: clamp(2.3rem, 4.8vw, 3.8rem); font-weight: 300; line-height: 1.08; letter-spacing: -.01em; margin-bottom: 1.2rem; }
.lhero__title em { font-style: italic; font-weight: 300; color: var(--gold-soft); }
.lhero__lead { font-size: 1.12rem; font-weight: 300; line-height: 1.7; color: rgba(250,248,244,.88); max-width: 46ch; margin-bottom: 1.9rem; }
.lhero__points { list-style: none; display: grid; gap: .75rem; }
.lhero__points li { display: flex; align-items: center; gap: .75rem; color: rgba(250,248,244,.9); font-weight: 300; }
.lhero__points i { color: var(--gold-soft); font-size: 1.2rem; }

/* ---------- Form card ---------- */
.formcard { background: var(--surface); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 2.2rem; }
.formcard h3 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; letter-spacing: 0; margin-bottom: .4rem; }
.formcard p { color: var(--ink-soft); font-size: .92rem; font-weight: 300; margin-bottom: 1.4rem; }
.lform { display: grid; gap: .75rem; }
.lform__row { display: flex; gap: .75rem; }
.lform input, .lform select, .lform textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 2px; background: var(--bg);
  font-family: var(--font-body); font-size: .95rem; color: var(--ink); padding: .85rem .95rem; outline: none;
  transition: border-color .2s; resize: vertical;
}
.lform input:focus, .lform select:focus, .lform textarea:focus { border-color: var(--gold); }
.lform__check { display: block; font-size: .8rem; color: var(--muted); line-height: 1.5; }
.lform__check a { color: var(--gold-text); text-decoration: underline; }
.lform__hint { font-size: .8rem; color: var(--muted); line-height: 1.5; margin-top: -.35rem; }
/* Adjuntar archivo (trabaja con nosotros): el input hereda el aspecto de los
   demás campos y el botón nativo se viste como un botón fantasma pequeño. */
.lform__file { display: grid; gap: .4rem; }
.lform__label { font-size: .85rem; color: var(--ink-soft); }
.lform__label small { color: var(--muted); font-size: .78rem; margin-left: .35rem; }
.lform input[type="file"] { padding: .6rem .7rem; cursor: pointer; color: var(--ink-soft); }
.lform input[type="file"]::file-selector-button {
  font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  color: var(--gold-text); background: transparent; border: 1px solid var(--gold); border-radius: 2px;
  padding: .45rem .9rem; margin-right: .8rem; cursor: pointer; transition: background .2s, color .2s;
}
.lform input[type="file"]::file-selector-button:hover { background: var(--gold); color: var(--surface); }

/* ---------- Pasos ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; counter-reset: step; }
.step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.4rem 2rem; }
.step__num { font-family: var(--font-display); font-weight: 300; font-size: 3.4rem; line-height: 1; color: var(--gold-soft); margin-bottom: .9rem; }
.step__num::after { content: ''; display: block; width: 32px; height: 1px; background: var(--gold); margin-top: 1.1rem; }
.step h3 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; letter-spacing: 0; margin-bottom: .6rem; }
.step p { color: var(--ink-soft); font-weight: 300; font-size: .95rem; }

/* ---------- Casos de éxito ---------- */
/* Sin padding propio: el aire de arriba lo pone la seccion anterior. */
.casos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.caso { position: relative; aspect-ratio: 3/2; overflow: hidden; display: flex; align-items: end; }
.caso img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.caso::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,24,20,.92), rgba(26,24,20,.02) 66%); }
.caso:hover img { transform: scale(1.04); }
.caso__info { position: relative; z-index: 2; color: var(--surface); padding: 1.8rem; }
.caso__titulo { display: block; font-family: var(--font-display); font-size: clamp(1.3rem, 1.9vw, 1.6rem); font-weight: 500; }
.caso__precio { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-soft); margin-top: .45rem; }

/* ---------- Beneficios ---------- */
.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.8rem; }
.benefit { display: flex; gap: 1rem; align-items: flex-start; }
.benefit__icon { width: 48px; height: 48px; flex: none; border-radius: 2px; background: var(--gold-wash); color: var(--gold-text); font-size: 1.35rem; display: grid; place-items: center; }
.benefit h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; letter-spacing: 0; margin-bottom: .4rem; }
.benefit p { color: var(--ink-soft); font-weight: 300; font-size: .93rem; }

/* ---------- Nosotros: intro split ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; align-items: center; }
.about__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.about__img img { width: 100%; height: 100%; object-fit: cover; }
.about h2 { font-family: var(--font-display); font-size: clamp(2rem, 3.8vw, 2.8rem); font-weight: 400; letter-spacing: 0; margin-bottom: 1.1rem; }
.about h2::after { content: ''; display: block; width: 32px; height: 1px; background: var(--gold); margin-top: 1.1rem; }
.about p { color: var(--ink-soft); font-weight: 300; margin-bottom: 1rem; line-height: 1.8; max-width: 68ch; }

/* ---------- Contacto ---------- */
.contactpage { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.2rem; align-items: start; padding-bottom: 1rem; }
.contactpage__list { list-style: none; display: grid; gap: 1.2rem; margin-top: 1.8rem; }
.contactpage__list li { display: flex; align-items: center; gap: .9rem; color: var(--ink-soft); font-weight: 300; }
.contactpage__list i { color: var(--gold); font-size: 1.3rem; width: 24px; }
.contactpage__list a:hover { color: var(--gold-text); }
.contactpage__form { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.2rem; }
#contactMap { height: 380px; border-radius: var(--radius); border: 1px solid var(--line); margin-top: 1rem; }

/* ---------- Reveal ---------- */
.step, .benefit { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.step.in, .benefit.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .step, .benefit { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .lhero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .steps { grid-template-columns: 1fr; }
  /* Una columna: las seis fotos en pila, y mas apaisadas para no alargar tanto. */
  .casos__grid { grid-template-columns: 1fr; }
  .caso { aspect-ratio: 16/9; }
  .about { grid-template-columns: 1fr; gap: 1.8rem; }
  .about__img { order: -1; }
  .contactpage { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
  .lform__row { flex-direction: column; }
}