/* =========================================================
   NEWWEST — Plantilla de página de servicio (Comprar, Vender, Arrendar, Administración)
   Solo composición: tipografías y componentes vienen del sistema.
   ========================================================= */

/* ---------- N° 01 Introducción en dos bloques ---------- */
/* Texto compacto: menos aire entre título, bloques y párrafos */
.intro-servicio { padding-bottom: clamp(72px, 8vw, 120px); }
.intro-servicio__title { margin: 20px 0 clamp(24px, 3vw, 40px); }
.intro-servicio__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.intro-servicio__cols > div { display: grid; gap: 10px; }
.intro-servicio__cols .t-body + .t-body { margin-top: 0; }
/* Variante de texto en un solo bloque (Administración) */
.intro-servicio__single { display: grid; gap: 14px; max-width: 46em; }
.intro-servicio__single .t-lead + .t-body { margin-top: 0; }
.guia__close { margin-top: clamp(56px, 7vw, 96px); }
/* Frase de remate en títulos (mismo estilo que "Son los principios que protegemos" en Acerca de) */
.intro-servicio__statement { margin-top: clamp(56px, 7vw, 96px); }
.intro-servicio__close {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(28px, 3.5vw, 48px);
  border-top: 1px solid var(--line-strong);
  font-family: var(--display); font-weight: 300; font-style: italic;
  font-size: var(--fs-title); line-height: 1.05; text-align: center;
}
.intro-servicio__close em { font-style: normal; letter-spacing: .04em; }

/* ---------- Franja fotográfica ---------- */
.photo-band { position: relative; height: clamp(320px, 62vh, 640px); overflow: hidden; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }

/* ---------- N° 02 Método: línea de tiempo (esquema Costa Houses, estilo NEWWEST) ----------
   Línea vertical al centro con rombos; los pasos se alternan izquierda / derecha.
   La línea se "llena" en taupe a medida que se baja (js/servicio.js). */
.guia__head { display: grid; gap: 24px; margin-bottom: clamp(48px, 6vw, 88px); }
.guia__head--center { justify-items: center; text-align: center; }

.timeline { position: relative; max-width: 1120px; margin: 0 auto; }
.timeline::before,
.timeline__progress {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  transform: translateX(-50%);
}
.timeline::before { background: var(--line-strong); }
.timeline__progress {
  list-style: none; background: var(--taupe);
  transform-origin: top; transform: translateX(-50%) scaleY(var(--progreso, 0));
}

.step { position: relative; display: grid; grid-template-columns: 1fr 72px 1fr; align-items: center; padding: clamp(22px, 2.6vw, 36px) 0; }
/* Marcador en rombo sobre la línea; se rellena cuando el paso aparece */
.step::before {
  content: ""; grid-column: 2; grid-row: 1; justify-self: center; z-index: 1;
  width: 12px; height: 12px;
  border: 1px solid var(--taupe); background: var(--marfil);
  transform: rotate(45deg);
  transition: background-color .8s var(--ease) .3s;
}
.step.is-visible::before { background: var(--taupe); }

.step__content { grid-row: 1; display: grid; gap: 12px; }
/* El primer hijo de la lista es la línea de progreso: los pasos impares de la secuencia son :nth-child(even) */
.step:nth-child(even) .step__content { grid-column: 1; justify-items: end; text-align: right; }
.step:nth-child(odd) .step__content { grid-column: 3; justify-items: start; text-align: left; }

.step__top { display: flex; align-items: center; gap: 14px; }
.step:nth-child(even) .step__top { flex-direction: row-reverse; }
.step__icon { width: 30px; height: 30px; stroke-width: 1; transition: transform .6s var(--ease); }
.step:hover .step__icon { transform: translateY(-3px); }
.step__title { font-family: var(--display); font-weight: 400; font-size: var(--fs-subtitle); line-height: 1.1; max-width: 13em; }
.step__content .t-body { max-width: 30em; }

/* ---------- N° 03 Llamado a la acción + foto ---------- */
.cierre-servicio__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(48px, 8vw, 140px); align-items: center; }
.cierre-servicio__content { display: grid; gap: 24px; justify-items: start; }
.cierre-servicio__content .t-title { margin: 6px 0 6px; }
.cierre-servicio__content .t-body { max-width: 34em; }
.cierre-servicio__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 8px; }
.cierre-servicio__img { aspect-ratio: 4 / 5; background: var(--marfil-2); }
.cierre-servicio__img img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px) {
  .cierre-servicio__grid { grid-template-columns: 1fr; }
  .cierre-servicio__img { aspect-ratio: 4 / 3; max-width: 640px; }
}

/* Celular y tablet vertical: la línea pasa a la izquierda y todos los pasos a la derecha */
@media (max-width: 820px) {
  .timeline::before, .timeline__progress { left: 6px; }
  .step { grid-template-columns: 13px 1fr; column-gap: 24px; align-items: start; }
  .step::before { grid-column: 1; margin-top: 10px; }
  .step:nth-child(n) .step__content { grid-column: 2; justify-items: start; text-align: left; }
  .step:nth-child(n) .step__top { flex-direction: row; }
}

@media (max-width: 720px) {
  .intro-servicio__cols { grid-template-columns: 1fr; }
  .intro-servicio__close { text-align: left; }
}