/* DB Project — Proceso.
   La página cambia de forma por completo respecto de la anterior: el recorrido
   horizontal pineado se usa en el Inicio y no se repite acá, porque dos páginas
   con el mismo mecanismo hacen que el sitio se sienta corto de ideas.

   Acá va lo propio de esta página: los cinco pasos en vertical con un índice
   lateral fijo que marca en cuál estás, la franja de la semana de espera, la
   entrega y la propiedad. La forma de un paso —las dos columnas de lo que
   hacemos nosotros y lo que necesitamos de vos— es compartida con el Inicio y
   vive en css/components.css. */

/* ═════════════════════════════════════════════════════════════════════════════
   01 · LOS CINCO PASOS — formato vertical con anclaje lateral
   El recorrido horizontal pineado NO se usa acá. Lo usa el Inicio, y dos páginas
   con el mismo mecanismo hacen que el sitio se sienta corto de ideas. Toda la
   implementación anterior de esta sección se fue con él.

   A la izquierda, los cinco pasos listados y numerados, en una columna que se
   queda fija mientras se recorre la sección y marca en cuál estás. A la derecha,
   el contenido de cada paso, que va cambiando al scrollear.
   ═══════════════════════════════════════════════════════════════════════════ */

/* minmax(0, 1fr) y no una pista `auto`. Una pista automática se dimensiona
   contra el min-content de sus ítems, así que cualquier hijo que no pueda
   encogerse la agranda y la grilla termina más ancha que su contenedor: es el
   desborde horizontal clásico de una grilla de una sola columna. Medido acá a
   375px: la pista salía en 366 dentro de un contenedor de 312, y la página
   scrolleaba 39px de costado. El 0 de mínimo dice explícitamente que la columna
   puede encogerse. */
.pasos__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .pasos__grid {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    column-gap: var(--space-7);
  }
  .pasos__indice {
    position: sticky;
    top: var(--nav-clearance);
    /* align-self: start es obligatorio, no decorativo. En una grilla, un ítem se
       estira al alto de su fila por defecto: el índice mediría lo que mide la
       columna entera de pasos y sticky no tendría dónde pegarse — se quedaría
       quieto sin quedarse fijo, que es el modo silencioso en que sticky falla. */
    align-self: start;
  }
}

.pasos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.pasos__lista a {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  /* Área táctil de 44px con el texto arriba: padding y no min-height, porque un
     ítem de dos renglones tiene que crecer. */
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  min-height: 44px;
  font-size: var(--db-fs-small);
  line-height: 1.4;
  color: var(--db-gris-medio);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: var(--space-3);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.pasos__num { font-size: var(--db-fs-eti); letter-spacing: 0.1em; flex-shrink: 0; }
.pasos__lista a:hover { color: var(--db-texto-sobre-oscuro); }
/* El paso en el que estás. Lo marca js/proceso.js con aria-current, que además
   es lo que un lector de pantalla anuncia: el estado se dice en palabras y no
   sólo con un filo de color. */
.pasos__lista a[aria-current="true"] {
  color: var(--db-texto-sobre-oscuro);
  border-left-color: var(--db-acento);
  font-weight: 500;
}

.pasos__contenido { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }

/* ── UN PASO ─────────────────────────────────────────────────────────────────
   Rehecho. Antes: número de agua detrás, rótulo, título, dos columnas y una
   franja de salida separada por una línea de un píxel. Las tres zonas pesaban
   lo mismo, así que "quién hace qué" y "con qué te quedás" se leían como un
   solo bloque de texto — la información mezclada que se reportó.

   Y tenía que dejar de parecerse a la 05 del Inicio, que ahora son paneles
   blancos flotando con sombra sobre el tramo claro. Acá la forma es la
   contraria: NADA flota. Un riel a la izquierda con el número y una línea que
   baja y encadena un paso con el siguiente —el proceso es una cadena, y la
   página que lo explica tiene que verse como una—, y a la derecha tres zonas
   con tratamiento distinto cada una:

     cabecera   rótulo y título, contra el riel
     reparto    las dos columnas, con un filete que las separa de verdad
     salida     bloque relleno con su flecha: es lo que el paso PRODUCE, y es lo
                único del paso que cambia de material

   Sin sombras, sin tarjetas, sin nada levantado del plano: es un registro, no
   una pila de fichas. */
.paso {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  /* Las filas van DECLARADAS y no implícitas. Con `grid-template-rows` sin
     definir, el `grid-row: 1 / -1` del riel no abarca nada: el -1 apunta a la
     última línea de la grilla EXPLÍCITA, y sin filas explícitas esa es la 1.
     Medido: el riel quedaba de 93px de alto adentro de un paso de 549, y la
     línea que encadena un paso con el siguiente se cortaba a un quinto de
     camino. */
  grid-template-rows: auto auto 1fr;
  column-gap: var(--space-4);
  /* El paso se ancla contra el tope de la pantalla igual que el índice, para que
     al saltar desde el índice el título quede debajo de la barra y no detrás. */
  scroll-margin-top: var(--nav-clearance);
}

/* EL RIEL. El número ya no es una marca de agua detrás del texto: es la primera
   columna, y la línea que sale de él baja hasta el paso siguiente. */
.paso__rail {
  /* El alto del número, en un solo lugar: lo usan su font-size y el `top` de la
     línea del riel, que tiene que arrancar justo debajo. Escrito dos veces, un
     cambio en uno desalineaba al otro en silencio. */
  --paso-num: clamp(1.75rem, 3.4vw, 2.75rem);
  grid-row: 1 / -1;
  position: relative;
  display: flex;
  justify-content: center;
  width: clamp(38px, 6vw, 64px);
}
.paso__agua {
  font-size: var(--paso-num);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--db-acento-sobre-claro);
}
/* La línea del riel. Arranca debajo del número y baja fuera del paso, hasta
   encontrarse con el riel del siguiente: el hueco entre pasos queda cosido. */
.paso__rail::before {
  content: "";
  position: absolute;
  top: calc(var(--paso-num) + var(--space-2));
  bottom: calc(var(--space-8) * -1);
  left: 50%;
  width: 1px;
  background: color-mix(in srgb, var(--db-grafito) 16%, transparent);
}
/* El último no encadena con nada. */
.paso:last-of-type .paso__rail::before { bottom: 0; }

/* ZONA 1 · la cabecera */
.paso__cab { grid-column: 2; margin-bottom: var(--space-4); }
.paso__rotulo {
  margin: 0 0 var(--space-1);
  font-family: var(--db-font-mono);
  font-size: var(--db-fs-eti);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--db-gris-medio);
}
.paso h3 {
  margin: 0;
  font-size: var(--db-fs-h3);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

/* ZONA 2 · el reparto. Las dos columnas quedan donde estaban pero ahora
   arrancan contra la segunda columna del riel. */
.paso__cols { grid-column: 2; }

/* ZONA 3 · la salida. Lo que el paso PRODUCE.
   Antes era una línea de un píxel arriba y el mismo material que el resto: leído
   de corrido, era un cuarto párrafo. Ahora es el único bloque del paso con
   fondo propio y con una flecha que apunta hacia adentro — se ve, sin leer, que
   es la consecuencia de lo de arriba y no más de lo mismo. */
.paso__detalle {
  grid-column: 2;
  position: relative;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--db-radius-card);
  background: color-mix(in srgb, var(--db-acento) 9%, transparent);
  border: 0;
}
/* La flecha del bloque de salida: un triángulo apoyado en el borde de arriba,
   apuntando hacia abajo. Dice "de todo eso, sale esto". */
.paso__detalle::before {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--space-5);
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: color-mix(in srgb, var(--db-acento) 9%, transparent);
}
.paso__detalle-eti {
  margin: 0 0 var(--space-2);
  font-size: var(--db-fs-eti);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--db-acento-sobre-claro);
}
.paso__detalle p:not(.paso__detalle-eti) {
  margin: 0;
  max-width: 78ch;
  font-size: var(--db-fs-small);
  line-height: 1.6;
  color: var(--db-texto-secundario-sobre-claro);
}

/* En teléfono el riel pasa a ser una fila propia arriba: con 375px de ancho, una
   columna de 38px para el número le deja 300 al texto y las dos columnas del
   reparto caen a 140 cada una. */
@media (max-width: 599px) {
  .paso { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .paso__rail {
    grid-row: auto;
    width: auto;
    justify-content: flex-start;
    margin-bottom: var(--space-2);
  }
  .paso__rail::before { display: none; }
  .paso__cab, .paso__cols, .paso__detalle { grid-column: 1; }
}

/* ── La pausa: la semana de por medio ────────────────────────────────────────
   No es un paso, es el hueco entre dos, y tiene forma propia para que se note:
   una franja a lo ancho de la columna de contenido, con su propio material, en
   medio de una serie de bloques que no lo tienen. La línea se llena mientras la
   franja entra en pantalla — la semana se ve pasar en vez de estar sólo
   escrita. */
.pausa {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  /* Aire propio arriba y abajo, además del que ya separa a los pasos: el hueco
     tiene que sentirse más largo que el salto entre dos pasos. */
  margin-block: var(--space-5);
  border-block: 1px solid var(--db-linea);
  /* El único bloque de la columna con fondo propio: es lo que lo distingue de
     un paso a distancia, antes de leer una palabra. */
  background: color-mix(in srgb, var(--db-grafito) 5%, transparent);
  text-align: center;
  scroll-margin-top: var(--nav-clearance);
}
.pausa__linea {
  margin: 0;
  font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--db-texto-sobre-oscuro);
}
/* La semana que pasa. Es la única pieza de la página cuyo movimiento ES el
   contenido: se llena de izquierda a derecha cuando la franja entra en pantalla,
   así la espera se ve en vez de leerse. La dispara el mismo observador que marca
   el paso activo (js/proceso.js) — un mecanismo, dos usos. */
.pausa__semana {
  display: block;
  position: relative;
  height: 2px;
  /* Ancho explícito, no max-width. En una grilla, un ítem con margin-inline:auto
     se dimensiona por su contenido — y esta barra no tiene contenido, así que
     medía 0px de ancho y la semana no se veía pasar. */
  width: min(420px, 100%);
  justify-self: center;
  background: var(--db-linea);
}
.pausa__semana-fill {
  position: absolute;
  inset: 0;
  /* 85% y no 60: a 60 sobre el tramo claro la línea no se distinguía de su
     propia pista y el gesto no se veía. */
  background: color-mix(in srgb, var(--db-acento) 85%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  /* La espera dura lo que dura: siete segundos de recorrido, uno por día. No es
     un tiempo estético — es la única forma de que "una semana" se sienta larga
     sin escribirlo. La clase la pone el observador cuando la franja entra. */
  transition: transform 7s linear;
}
.pausa.is-visto .pausa__semana-fill { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .pausa__semana-fill { transition: none; transform: scaleX(1); }
}
.pausa__nota {
  margin: 0;
  font-size: var(--db-fs-small);
  color: var(--db-gris-medio);
}


/* ═════════════════════════════════════════════════════════════════════════════
   02 · QUÉ INCLUYE LA ENTREGA
   Cuatro tarjetas con el tratamiento único del sitio (borde, arco de luz,
   elevación — css/components.css + js/glow.js), resueltas con tipografía y sin
   dibujos.
   ═══════════════════════════════════════════════════════════════════════════ */

.entrega__list { margin-top: var(--space-6); }

/* ── Toda la tarjeta abre la ficha ───────────────────────────────────────────
   Pieza: "Expandable Cards" (db-project-biblioteca, references/tarjetas.md) —
   card chica de una grilla que se abre a detalle. De la ficha se porta el
   contrato de interacción: el objetivo es la tarjeta, no una línea de 12px al
   pie. El botón que abre vive ahora dentro del <h3> (patrón .todo-clic,
   css/components.css) y el "Ver el detalle +" del pie queda como señal. */
.entrega__list .card { position: relative; isolation: isolate; cursor: pointer; }
/* El botón que abre ya no vive escondido dentro del <h3>: el "Ver el detalle"
   del pie ES el control (.ver-mas--todo, css/components.css) y estira su área
   sobre la tarjeta. El foco lo dibuja esa misma regla compartida. */
/* z-index 1 y no 4: por encima del número de agua, por DEBAJO del área del
   botón (z-index 3). Con 4 el párrafo ganaba el centro de la tarjeta y ese
   punto dejaba de responder — medido, el punto medio de las cuatro daba ✗. */
.entrega__list .card p { position: relative; z-index: 1; }

/* La frase clave sube de --db-fs-h3 (20px) a 26: es lo que se lee de la
   tarjeta, y al lado de una línea de apoyo de 14 el salto tiene que verse. */
.entrega .card h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.entrega .card p:not(.card__num) { font-size: var(--db-fs-small); }

/* El único detalle en acento de cada tarjeta: un filo corto bajo la frase
   clave, que se extiende cuando la tarjeta responde. Va acá y no en el número
   —que en mono y a 11px no llegaría a 4,5:1 en acento— así el color aparece
   donde no tiene que leerse como texto. Es el mismo idioma de la línea que
   cierra .marca. */
.entrega .card h3::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: var(--space-2);
  background: var(--db-acento);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.entrega .card:hover h3::after,
.entrega .card:focus-within h3::after,
.entrega .card.is-lit h3::after,
.entrega .card.is-entered h3::after { transform: scaleX(2.4); }

@media (prefers-reduced-motion: reduce) {
  .entrega .card h3::after { transition: none; }
}


/* ═════════════════════════════════════════════════════════════════════════════
   03 · DE QUIÉN ES CADA COSA
   Dos columnas que entran desde lados opuestos y se encastran en el centro
   (data-reveal="cross", js/reveals.js). Un ítem por renglón, en tipografía
   grande y sin párrafos: se lee en tres segundos. El recorte lateral que pide
   la entrada cruzada ya lo pone css/base.css con :has([data-reveal="cross"]).
   ═══════════════════════════════════════════════════════════════════════════ */

/* MÁS FORMA. Las dos listas funcionaban y tenían buen movimiento, pero eran
   eso: dos listas una al lado de la otra. La sección habla de un REPARTO —qué
   cae de cada lado— y esa idea pedía que los dos lados fueran dos territorios
   con una frontera entre medio, no dos columnas de texto.
   Cada lado pasa a tener superficie propia, y entre los dos queda una línea
   vertical que es literalmente el límite del que habla la sección. */
.propiedad__grid {
  position: relative;
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-5);
}
.propiedad__col {
  padding: var(--space-4);
  border-radius: var(--db-radius-card);
  background: color-mix(in srgb, var(--db-blanco) 3%, transparent);
  border: 1px solid var(--db-linea);
}
/* El lado que queda a tu nombre se marca con el material, no sólo con el color
   de la etiqueta: es el dato que la sección viene a dar. */
.propiedad__col--tuyo {
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--db-acento) 10%, transparent), transparent 65%),
    color-mix(in srgb, var(--db-blanco) 3%, transparent);
  border-color: color-mix(in srgb, var(--db-acento) 30%, transparent);
}
@media (min-width: 900px) {
  .propiedad__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
  /* La frontera. Va en el medio del hueco entre las dos columnas, no como borde
     de una de ellas: un borde pertenece a un lado, y este límite no es de
     ninguno de los dos. */
  .propiedad__grid::before {
    content: "";
    position: absolute;
    top: var(--space-4);
    bottom: var(--space-4);
    left: 50%;
    width: 1px;
    background: linear-gradient(to bottom,
      transparent, var(--db-linea) 15%, var(--db-linea) 85%, transparent);
  }
}

/* "Tuyo" es el único elemento en acento pleno de la sección: es el dato que la
   sección viene a dar. */
.propiedad__col--tuyo .comparacion__label {
  color: var(--db-acento);
  border-bottom-color: color-mix(in srgb, var(--db-acento) 45%, transparent);
}

/* gap 0 y separación por borde: los ítems son un listado corrido, no tres
   bloques sueltos. El filo izquierdo repite el idioma de las columnas del
   recorrido, así las dos particiones de la página se leen como la misma idea. */
.propiedad__items { gap: 0; }
/* OJO: .comparacion__items li lo anima GSAP (entrada por pares) — no puede
   llevar transition ni transform propios. Acá sólo se transicionan color y
   borde, que GSAP no toca. */
.propiedad__items li {
  padding: var(--space-3) 0 var(--space-3) var(--space-3);
  border-left: 2px solid var(--db-linea-fuerte);
  border-bottom: 1px solid var(--db-linea);
  /* Antes cada ítem era una frase de tres palabras —"El dominio"— y todo el
     renglón iba en 28px y semibold. Ahora cada uno explica el término en la
     misma línea en que lo nombra, y con ese largo el tamaño baja y el peso se
     reparte: el NOMBRE de la cosa en semibold y su explicación en normal. Todo
     en semibold sería un párrafo gritado, y todo en normal perdería lo único
     que hay que poder saltear con la vista, que es de qué cosa habla cada
     renglón. */
  font-size: clamp(1.0625rem, 1.15vw, 1.25rem);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.45;
  color: var(--db-gris-claro);
  transition: border-left-color 0.35s ease, color 0.25s ease;
}
.propiedad__items b {
  font-weight: 600;
  color: var(--db-texto-sobre-oscuro);
}
.propiedad__col--tuyo .propiedad__items li {
  border-left-color: color-mix(in srgb, var(--db-acento) 55%, transparent);
}
/* Respuesta al puntero y su equivalente táctil: sin mouse, la columna se
   enciende una vez al entrar en pantalla (.is-entered, js/proceso.js) — el
   mismo criterio que ya usan las tarjetas del sitio. */
.propiedad__items li:hover,
.propiedad__col.is-entered .propiedad__items li {
  border-left-color: var(--db-acento);
}

.propiedad__nota {
  margin-top: var(--space-5);
  max-width: 62ch;
  font-size: var(--db-fs-lead);
  line-height: 1.55;
  color: var(--db-gris-claro);
}
.propiedad__nota strong {
  color: var(--db-texto-sobre-oscuro);
  font-weight: 600;
}


/* ═════════════════════════════════════════════════════════════════════════════
   Mobile
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 899px) {
  /* En una pantalla angosta el índice deja de estar al costado: se convierte en
     una tira horizontal arriba de los pasos. Fija, para que siga diciendo en cuál
     estás mientras se scrollea. */
  .pasos__indice {
    position: sticky;
    /* top: 0 no: 0 es exactamente donde flota la píldora de la barra, así que la
       tira quedaba PERMANENTEMENTE por detrás de ella. Medido a 375 en el scroll
       1218: la tira arrancaba en y=16 y elementFromPoint sobre su centro
       devolvía .nav__pill — o sea que en el teléfono el índice de los cinco
       pasos no se veía ni se podía tocar. --nav-clearance es la misma medida que
       usa la versión de escritorio, e incluye el recorte de pantalla. */
    top: var(--nav-clearance);
    /* 2 y no 1: los hijos de cada .paso también están en z-index 1, y con el
       mismo valor gana el que viene después en el documento — o sea el texto del
       paso, que pasaba por encima de la tira. Sigue muy por debajo de --z-nav
       (50), que es lo único que tiene que quedar arriba de todo. */
    z-index: 2;
    /* El fondo del tramo: la tira se superpone al contenido que pasa por debajo
       y sin fondo propio se leerían los dos textos encimados. */
    background: var(--db-tramo-claro);
    padding-block: var(--space-2);
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
    border-bottom: 1px solid var(--db-linea);
  }
  .pasos__indice .marca { display: none; }
  .pasos__lista {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pasos__lista::-webkit-scrollbar { display: none; }
  .pasos__lista a {
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: var(--space-1) var(--space-2);
    white-space: nowrap;
    /* En la tira sólo entra el número: los cinco títulos completos no caben en
       375px y cortarlos deja rótulos a medias. El título sigue en el árbol de
       accesibilidad, así que un lector de pantalla lo lee entero. */
    font-size: 0;
  }
  .pasos__lista a[aria-current="true"] { border-bottom-color: var(--db-acento); }
  .pasos__num { font-size: var(--db-fs-small); }
  .pasos__contenido { gap: var(--space-7); }
  .paso h3 { font-size: 1.5rem; }
  .paso__cols { gap: var(--space-3); }
  /* El cuerpo del paso NO baja a 15px. Era el texto que explica qué va a pasar
     con el proyecto de alguien que está por poner doscientos mil pesos, y a
     0,9375rem nadie frena a leerlo. Se queda en la escala de prosa del sitio. */
  .paso__col p:not(.paso__eti) { font-size: 1.0625rem; line-height: 1.55; }
  .paso__nada { font-size: 1.125rem; }

  .propiedad__items li { padding-block: var(--space-2); }
}



/* ── "De quién es cada cosa", con tratamiento propio ──────────────────────────
   Tenía exactamente el formato de todo lo demás: apertura, dos columnas, dos
   listas con viñetas. Y es la sección que más se diferencia por CONTENIDO —dice
   qué es tuyo y qué no— así que ser igual que el resto era el peor resultado
   posible.
   Ahora las dos columnas son dos objetos separados por una costura, y con el
   mouse se mueven en sentido opuesto ("Wobble Card", db-project-biblioteca/
   tarjetas.md, ver js/tarjetas.js): no se mueven juntas porque no son de la
   misma persona. El equivalente táctil ya estaba puesto —entran de lados
   opuestos con data-reveal="cross"—, que es el mismo gesto disparado al llegar. */
.propiedad__grid { position: relative; }
.propiedad__col { will-change: transform; }

/* La costura. Una línea entre las dos columnas, con el acento apagándose hacia
   las puntas: es el límite del que habla la sección, dibujado. */
@media (min-width: 900px) {
  .propiedad__grid::before {
    content: "";
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: 50%;
    width: 1px;
    background: linear-gradient(to bottom,
      transparent,
      color-mix(in srgb, var(--db-acento) 55%, transparent) 22%,
      color-mix(in srgb, var(--db-acento) 55%, transparent) 78%,
      transparent);
    pointer-events: none;
  }
}

/* Las viñetas se van: dos listas con puntos son dos listas. Cada ítem pasa a ser
   una línea con su propio canto, del color del lado al que pertenece. */
.propiedad__items { list-style: none; padding: 0; }
.propiedad__items > li {
  position: relative;
  padding-left: var(--space-3);
}
.propiedad__items > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.propiedad__col--tuyo .propiedad__items > li::before { background: var(--db-acento); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .propiedad__col { transform: none !important; }
}