/* ============================================================
   IMMOBILIARE — Líneas con las puntas desvanecidas
   ------------------------------------------------------------
   Toda línea dorada nace y muere en transparencia: no arranca ni
   termina con un corte seco, se afina hacia los extremos. Es el
   mismo lenguaje que ya usaban las líneas de la TRANSICIÓN
   cinematográfica (.arrival-grid) — acá se lleva a las líneas en
   reposo, para que la página quieta hable el idioma de la página
   en movimiento.

   Dos técnicas, según el elemento:
   · mask-image .......... cuando la línea ES el elemento (un span,
                           un ::after). Se enmascara y listo.
   · border-image ........ cuando la línea es el borde de un
                           contenedor con contenido adentro (un
                           footer, una divisoria de sección).
                           Enmascarar el contenedor desvanecería
                           también su contenido.

   Los degradés usan var(--line)/var(--gold) de CADA página, así el
   archivo sirve igual en el registro oscuro (home) y en el claro
   (secciones). NO se redefine ninguna variable.

   Se carga DESPUÉS del <style> de cada página, para ganar por
   orden de fuente sin necesidad de !important.
   ============================================================ */

:root{
  /* Largas: el degradé se mide en % (la punta se afina en proporción) */
  --fade-v:  linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  --fade-h:  linear-gradient(90deg,  transparent 0%, #000  7%, #000 93%, transparent 100%);
  /* Cortas: el degradé se mide en px, si no la línea se come a sí misma */
  --fade-s:  linear-gradient(90deg, transparent 0%, #000 6px, #000 calc(100% - 6px), transparent 100%);
  --fade-xs: linear-gradient(90deg, transparent 0%, #000 4px, #000 calc(100% - 4px), transparent 100%);
  --fade-mini: linear-gradient(90deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}

/* ---------- 1. Retícula vertical (la constante que cruza todo) ---------- */
.rules > span{
  -webkit-mask-image:var(--fade-v); mask-image:var(--fade-v);
  -webkit-mask-repeat:no-repeat;    mask-repeat:no-repeat;
}

/* ---------- 2. La firma dorada de 36px y su prima corta ----------
   La firma se llama .rule en las secciones y .sig en el home (registro
   oscuro); .sig-cta es la misma línea al pie de un CTA importante. Las
   tres miden 36px y son el mismo sello: se desvanecen igual. */
.rule,
.sig,
.sig-cta{
  -webkit-mask-image:var(--fade-s); mask-image:var(--fade-s);
  -webkit-mask-repeat:no-repeat;    mask-repeat:no-repeat;
}
.adv-link .adv-rule{
  -webkit-mask-image:var(--fade-xs); mask-image:var(--fade-xs);
  -webkit-mask-repeat:no-repeat;     mask-repeat:no-repeat;
}

/* ---------- 3. Divisorias largas: el borde se vuelve degradé ---------- */
footer,
.adv-row,
.adv-panel.open,
.adv-inner,
.svc,
.pasos,
.triad,
.next,
.specs-grid{
  border-image:linear-gradient(90deg, transparent 0%,
    var(--line, rgba(176,137,75,.17)) 7%,
    var(--line, rgba(176,137,75,.17)) 93%, transparent 100%) 1;
}

/* Las sutilísimas, con su propio tono */
.foot-base,
.fi-extra,
.catalog.as-list .item{
  border-image:linear-gradient(90deg, transparent 0%,
    var(--line-soft, rgba(176,137,75,.085)) 7%,
    var(--line-soft, rgba(176,137,75,.085)) 93%, transparent 100%) 1;
}

/* Celdas de la ficha técnica: degradé corto, para que la fila siga leyéndose
   como una sola línea y no como cuatro guiones sueltos */
.sp{
  border-image:linear-gradient(90deg, transparent 0%,
    var(--line-soft, rgba(176,137,75,.085)) 3px,
    var(--line-soft, rgba(176,137,75,.085)) calc(100% - 3px), transparent 100%) 1;
}

/* ---------- 4. Subrayados que se dibujan al hover ---------- */
.adv-chip::after,
.f-apply::after,
.fi-opt .txt::after,
.cselopts li .txt::after{
  -webkit-mask-image:var(--fade-xs); mask-image:var(--fade-xs);
  -webkit-mask-repeat:no-repeat;     mask-repeat:no-repeat;
}

/* ---------- 5. Guiones cortos (viñetas, prefijo de WhatsApp) ---------- */
.principios span::before,
.feelings span::before,
.wa::before{
  -webkit-mask-image:var(--fade-mini); mask-image:var(--fade-mini);
  -webkit-mask-repeat:no-repeat;       mask-repeat:no-repeat;
}

/* ---------- 6. Subrayados que además cambian de color ----------
   Acá no sirve border-image: no interpola, y perderíamos el fundido
   lento a dorado. Se apaga el borde (sin tocar el layout: el 1px
   sigue ocupando su lugar) y se dibuja la línea en un ::after
   enmascarado, que sí puede transicionar el color. */

/* Valor de filtro (catálogo de Inmuebles) */
.f .v,
.f .v:hover,
.f.dd-active .v{ border-bottom-color:transparent; }
.f .v{ position:relative; }
.f .v::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background-color:var(--line, rgba(176,137,75,.17));
  -webkit-mask-image:var(--fade-h); mask-image:var(--fade-h);
  -webkit-mask-repeat:no-repeat;    mask-repeat:no-repeat;
  transition:background-color .3s ease;
}
.f .v:hover::after,
.f.dd-active .v::after{ background-color:var(--gold); }

/* Selector "¿Qué te trae por acá?" (Contacto) */
.csel-top,
.cselect:focus .csel-top,
.cselect.open .csel-top{ border-bottom-color:transparent; }
.csel-top{ position:relative; }
.csel-top::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background-color:var(--line, rgba(176,137,75,.17));
  -webkit-mask-image:var(--fade-h); mask-image:var(--fade-h);
  -webkit-mask-repeat:no-repeat;    mask-repeat:no-repeat;
  transition:background-color .35s ease;
}
.cselect:focus .csel-top::after,
.cselect.open .csel-top::after{ background-color:var(--gold); }

/* ---------- Lo que NO lleva degradé ----------
   Los bordes de CAJA (botones .btn-ghost, marco del mapa .mapa-wrap) y los
   campos de texto. Un botón con las esquinas desvanecidas se lee como un
   error de render, no como elegancia. La caja encierra; la línea ordena. */