/* ───────────────────────────────────────────────────────────────
   IMMOBILIARE — Móvil (Fase 1: fontanería)
   Se carga DESPUÉS del <style> de cada página, así gana los empates.
   Sirve a los dos registros: home oscuro (--ground) e internas marfil (--paper).
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {

  /* Nada se desborda a lo ancho */
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, iframe { max-width: 100%; }

  /* EL RECUADRO OSCURO AL TOCAR.
     Es el resaltado que iOS pinta por defecto sobre cualquier cosa tocable: una
     caja gris, cuadrada, ajena a todo el lenguaje del sitio. Se apaga y se pone
     en su lugar un acuse propio: lo tocado se atenúa un instante, como si
     cediera bajo el dedo. Se siente, no se ve. */
  html { -webkit-tap-highlight-color: transparent; }
  a, button, .f .v, .vt-opt, .adv-link { transition: opacity .18s ease; }
  a:active, button:active, .f .v:active, .vt-opt:active, .adv-link:active { opacity: .55; }

  /* LA FOTO A PANTALLA COMPLETA.
     100svh es la altura CHICA del viewport: deja de contar la franja que ocupan
     las barras de Safari, así que el hero no llegaba a los extremos. 100dvh
     mide la pantalla real. Y con viewport-fit=cover el contenido pasa por
     debajo de la barra de estado: el nav respeta esa zona para que el logo no
     quede bajo el reloj. */
  .hero { min-height: 100dvh; }

  /* ── El menú ──────────────────────────────────────────────────
     En escritorio los nombres se desenrollan al pasar el cursor.
     En el celular no hay cursor: el // abre una hoja desde arriba.
     Se anula el display:none que las internas ponían en 560px.

     OJO: la animación de entrada .fu deja un transform permanente en
     .navmenu (fill-mode both), y un ancestro con transform ancla los
     position:fixed a ÉL en vez de a la pantalla → la hoja salía angosta
     y cortada. Se le quita el transform al contenedor y la entrada se
     le pasa al ícono, que no es ancestro de la hoja.                 */
  /* v589 — el selector de idioma queda PEGADO al menú (un solo grupo "ES //"), no flotando
     en el medio del encabezado. En móvil .navlinks es position:fixed (fuera de flujo), así
     que este gap solo separa langsel del ícono //. */
  .navmenu { position: static; animation: none; opacity: 1; transform: none; gap: 12px !important; }
  /* v598 — el ícono // y el selector de idioma entran JUNTOS con la misma animación (antes el
     langsel quedaba estático porque el .navmenu tiene animation:none y sólo el ícono la recibía). */
  .menu-btn,
  .langsel { animation: fuMovil 1.2s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .5s; }

  .navlinks {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 7;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: calc(104px + env(safe-area-inset-top, 0px)) var(--ax) 30px;   /* mismo eje que el hero, y bajo el reloj */
    background: var(--ground, var(--paper, #0e0c09));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    transform: translateY(-102%);
    transition: transform .72s cubic-bezier(.2, .7, .2, 1);
  }
  .navmenu.open .navlinks { transform: translateY(0); }

  /* El ícono // y el logo quedan por encima de la hoja (la marca no desaparece
     al abrir el menú, y el // sigue a mano para cerrarlo) */
  .menu-btn { position: relative; z-index: 8; padding: 12px; }
  .brandblock { position: relative; z-index: 8; }
  .navmenu.open .menu-btn .menu-slash line { stroke: var(--gold); }

  /* Los ítems: siempre visibles dentro de la hoja (en escritorio arrancan en opacity 0) */
  .navitem {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    width: 100%;
    transition: none;
  }
  /* Menos tracking y algo más de peso: tan abierto perdía personalidad.
     Y menos separación vertical: parecían botones sueltos, no una composición. */
  .navitem > a {
    display: block;
    padding: 9px 0;               /* −18% de aire vertical: composición, no lista suelta */
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .13em;
    text-shadow: none;
  }

  /* Submenús en DOS columnas: rompe la columna única y se lee editorial,
     no como una lista. Además quedan claramente subordinados al padre. */
  .submenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 116px));
    gap: 2px 16px;
    padding: 2px 0 10px 15px;
    white-space: normal;
  }
  .submenu a {
    padding: 4px 0;
    font-size: 10.5px;            /* +8%: dejan de parecer notas al pie, son parte del menú */
    letter-spacing: .12em;
    text-shadow: none;
  }

  /* EL DETALLE DE IDENTIDAD.
     El menú cierra con el mismo anclaje que abre el hero — misma línea dorada
     de 36px, mismo mono, mismo lugar en el mundo. No es un separador: es la
     firma de la casa, rimando de punta a punta del sitio. */
  .navsign {
    margin-top: 26px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ink-mut);
  }
  .navsign .r {
    display: block;
    width: 36px;                  /* 36px SIEMPRE. Nunca otra medida. */
    height: 1px;
    background: var(--gold);
    opacity: .72;
    margin-bottom: 16px;
  }

  /* El velo de fondo: en el celular lo manda el toque, no el cursor.
     Safari dispara mouseenter/mouseleave al tocar, así que se desacopla
     de esos listeners y responde solo a body.menu-open. */
  .menu-dim { z-index: 5; opacity: 0 !important; pointer-events: none !important; }
  body.menu-open .menu-dim { opacity: 1 !important; pointer-events: auto !important; }

  /* Con el menú abierto no se scrollea el fondo */
  body.menu-open { overflow: hidden; }

  /* ── Hero ─────────────────────────────────────────────────────
     El slogan se ocultaba siguiendo el cursor. Sin cursor, se queda. */
  .slogan-wrap.hidden { opacity: 1; transform: none; filter: none; }

  /* EL EJE.
     En escritorio el logo va a la izquierda y el título al centro: la simetría
     de una pantalla ancha lo sostiene. En una columna de 390px son dos sistemas
     de alineación peleando, y la composición se lee como piezas apiladas.
     Acá TODO cuelga de una sola recta a --ax del borde: logo, año, línea dorada,
     título y CTA. La línea vertical deja de ser adorno: es ese eje, bajando
     desde el CTA hacia el contenido. */
  :root { --ax: 26px; }

  /* env(safe-area-inset-top): con viewport-fit=cover la foto pasa por debajo de
     la barra de estado del iPhone; el nav se corre para no quedar bajo el reloj. */
  nav { padding: calc(30px + env(safe-area-inset-top, 0px)) var(--ax) 30px; }
  .nav-logo { width: 106px; }                   /* −17%: el ojo va a la frase, no al logo */
  .brandsub {                                    /* v589 — menos dominante: que IMMOBILIARE mande
                                                    y el subtítulo no lea como una segunda marca */
    font-size: 8px;
    letter-spacing: .3em;
    font-weight: 500;
    color: #cdc0a4;
    opacity: .68;
  }

  .hero-content {
    align-items: flex-start;
    text-align: left;
    justify-content: flex-start;
    padding: calc(186px + env(safe-area-inset-top, 0px)) var(--ax) 0;   /* sube el título ~110px */
    transform: none;
    z-index: 5;                                 /* por encima de las zonas táctiles */
  }

  /* El velo estaba calculado para un título CENTRADO: al mover el texto arriba
     y a la izquierda quedaba sobre el cielo claro. Además el texto cae justo
     donde el cielo se convierte en vegetación, y ese cambio de contraste hace
     ruido detrás de la frase. La cura no es más OSCURO (eso apaga la foto):
     es más LARGO, para que el fondo cambie despacio. Luz, no caja. */
  .hero-scrim {
    background:
      radial-gradient(140% 74% at 18% 34%, rgba(8, 7, 5, .52), transparent 74%),
      linear-gradient(rgba(8, 7, 5, .50),
                      rgba(8, 7, 5, .40) 26%,
                      rgba(8, 7, 5, .28) 46%,
                      rgba(8, 7, 5, .14) 64%,
                      rgba(8, 7, 5, .06) 74%,
                      rgba(8, 7, 5, .58));
  }

  /* JERARQUÍA: el lugar es un susurro de contexto; el CTA es la única acción de
     la pantalla. Competían de igual a igual (misma mono, mismo dorado, mismo
     tamaño). Se resuelve APAGANDO el que no lo necesita, no inflando el otro:
     rellenar el CTA de dorado lo convertiría en bloque y el dorado dejaría de
     ser acento. */
  .hero-est {
    font-size: 9.5px;
    letter-spacing: .26em;                       /* v589 — −18%: tan espaciado casi desaparecía; ahora se lee sin perder elegancia */
    color: #9d9280;                             /* gris cálido: deja de ser dorado */
    opacity: .9;
  }
  .hero-est .r { margin: 13px 0 16px; }         /* el año se acerca al título (sigue 36px) */

  .hero-statement { font-size: 30px; line-height: 1.13; }   /* −9%: la foto es la protagonista, el texto guía */
  .hero-statement em { font-size: 1.07em; }     /* la cursiva sube, la serif baja: dialogan */

  /* El CTA entra en la composición: mismo eje, colgado del título.
     Ya no es un elemento suelto al pie que se podría tapar con la mano. */
  .hcta {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-top: 32px;
    padding: 0;
    font-family: var(--mono);
    font-size: 12px;                            /* CTA principal: un punto más de presencia */
    font-weight: 600;
    letter-spacing: .2em;                       /* menos tracking: más peso, menos "nota al pie" */
    text-transform: uppercase;
    color: var(--gold-hi);
    text-decoration: none;
    pointer-events: auto;                       /* .hero-content los tiene apagados */
    position: relative;
    z-index: 6;
  }
  /* Ajuste óptico: la "L" serif del título tiene margen lateral propio, la mono
     arranca a ras del borde. Alineadas al mismo píxel, el CTA se ve corrido a la
     izquierda. 3px lo devuelven al eje al OJO, que es el que manda.
     La línea se queda en el eje real: ella ES el eje. */
  .hcta > span:first-child { padding-left: 3px; }
  .hcta .axis {
    width: 1px;
    height: 58px;
    background: linear-gradient(var(--gold), transparent);
    animation: drift 2.4s ease-in-out infinite;
  }

  .scrollcue { display: none; }                 /* lo reemplaza el CTA sobre el eje */

  /* Abrir el menú NO debe cambiar la foto del hero (el mouseenter simulado
     del toque encendía la aérea). La aérea la enciende solo tocar abajo. */
  body.menu-on .hbg-aerial { opacity: 0; }
  .hero.aerial .hbg-aerial { opacity: 1; }

  /* Las zonas táctiles del hero no deben tapar el aviso de scroll */
  .scrollcue { z-index: 5; }

  /* ── EDICIÓN DEL HOME MÓVIL ───────────────────────────────────
     El home tenía ~16 pantallas de scroll en un teléfono. La cura no es
     vaciarlo (el celular es por donde entra casi todo el tráfico: quien no
     scrollea no ve una propiedad ni sabe que hay arquitectura). La cura es
     EDITARLO: menos bloques, más fuertes, y menos aire por bloque.

     Se va el BUSCADOR: nadie llena cuatro desplegables en la portada de un
     teléfono, y el buscador ya existe —con lugar de sobra— dentro del
     catálogo, a un toque de "Descubrir inmuebles". Era además la pieza que
     peor caía en 390px.

     Se va AUTORIDAD ("17 años"): en escritorio es una línea suelta con aire;
     en el celular se convertía en un bloque más antes del cierre. El dato
     sobrevive en Nosotros y en el footer.

     DECISIÓN DE DEMIAN: el home móvil es la portada, la selección de
     inmuebles, Arquitectura y el contacto. Nada más.

     Se van: buscador (nadie llena 4 desplegables en un teléfono; ya está en el
     catálogo), autoridad, manifiesto, la pausa y el estudio.
     El estudio se llega desde el menú. */
  .search,
  .autoridad,
  .manifiesto,
  .pausa,
  .block.nosotros { display: none; }

  /* TODO el sitio cuelga del mismo eje que el hero y el menú. */
  .wrap { padding-left: var(--ax); padding-right: var(--ax); }

  /* En Arquitectura el contenedor lleva DOS clases en el mismo elemento
     (`wrap content`), y `.band .content{padding:100px 0}` le pisaba el padding
     lateral del .wrap. En escritorio no se veía —el max-width lo mantiene lejos
     del borde—; en 390px el título y la línea dorada quedaban pegados al canto.
     Bug viejo que solo se hizo visible cuando el viewport empezó a funcionar. */
  .band .content { padding: 64px var(--ax); }

  /* Menos aire por bloque: las medidas de escritorio (98–132px) son un lujo
     que en una columna se vuelve espera.
     OJO con el atajo: `padding: 58px 0` pisa el margen LATERAL del .wrap y el
     texto se va contra el canto. Acá siempre se nombra el eje. */
  .manifiesto { padding: 62px 0; }              /* su .wrap es un div aparte: ya trae eje */
  section.block { padding: 58px var(--ax); }    /* `block wrap` van en el MISMO elemento */
  .cta-final { padding: 66px 0; }
  .sec-head { margin-bottom: 30px; }
  .cards { gap: 26px; }
  .pausa { min-height: 52vh; }

  /* El footer de las internas no usa .wrap: pone su propio gutter. */
  footer { padding: 60px var(--ax) 36px; }
  footer .wrap { padding-left: 0; padding-right: 0; }   /* el del home, para no duplicar */

  /* ── CATÁLOGO DE INMUEBLES ────────────────────────────────────
     El filtro caía en dos filas de a dos y, con el título grande y las tres
     líneas de datos encima, la primera foto quedaba fuera de la pantalla.
     En un catálogo lo primero que se tiene que ver es una PROPIEDAD.

     Los cuatro campos van en UNA fila. No se reparten en partes iguales: cada
     uno recibe el ancho que su contenido necesita (Zona pide más que Tipo),
     así ninguno se corta. */
  .filters {
    display: grid;
    grid-template-columns: 0.92fr 0.74fr 1.12fr 0.98fr;   /* "Zona" deja de dominar la fila */
    gap: 0 10px;
    align-items: end;
    padding-top: 4px;
    padding-bottom: 18px;
  }
  .f { gap: 7px; min-width: 0; }
  .f label { font-size: 7.5px; letter-spacing: .1em; }
  .f .v {
    font-size: 12px;             /* nivel 2: claramente entre el título (34) y el rótulo (7,5) */
    min-width: 0;                  /* el min-width:120px de escritorio los desbordaba */
    padding-bottom: 6px;
    padding-right: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .f .chev { bottom: 8px; }        /* el valor es más chico acá que en escritorio */
  .f-apply {
    grid-column: 1 / -1;
    margin-left: 0;
    margin-top: 16px;
    text-align: right;
    font-size: 12px;             /* acción principal del form: más contundente (era 10) */
    font-weight: 500;
    letter-spacing: .16em;
  }

  /* El encabezado del catálogo, comprimido: es una entrada, no una portada. */
  h1.page-title { font-size: 34px; }
  .page-head { padding-top: 26px; padding-bottom: 18px; }
  .page-head .rule { margin: 14px 0 18px; }

  /* "1 inmueble disponible · Villa Mercedes · Actualizado hoy" pesaba MÁS que
     los rótulos del filtro, y es el dato menos importante de la pantalla: son
     datos al margen, no un titular. Baja por debajo de los rótulos. */
  .head-meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px 14px;
    margin-top: 14px;
    font-size: 7px;
    letter-spacing: .16em;
    opacity: .75;
  }

  /* ── El desplegable del filtro ─────────────────────────────────
     Abría y cerraba de golpe: la animación era sobre max-height con un techo
     de 560px, MUY por encima del alto real del contenido. El navegador recorre
     ese sobrante a toda velocidad, así que la parte visible aparece y se corta
     casi de una. Con grid-template-rows de 0fr a 1fr la altura animada es la
     EXACTA del contenido: se despliega y se repliega de verdad.

     Y la escala tipográfica estaba invertida: las opciones (15.5px) eran más
     grandes que el valor del campo que las abre (13px). Ahora baja por
     importancia: valor 13 → opción 12 → número 8 → rótulo 7,5. */
  .filter-index {
    display: grid;
    grid-template-rows: 0fr;
    max-height: none;
    overflow: hidden;
    opacity: 0;
    transition: grid-template-rows .58s cubic-bezier(.2, .7, .2, 1),
                opacity .42s ease;
  }
  .filter-index.open { grid-template-rows: 1fr; opacity: 1; }
  .filter-index > .fi-inner { min-height: 0; overflow: hidden; padding: 12px 0 2px; }

  .fi-opts { grid-template-columns: repeat(2, 1fr); }
  .fi-opt { padding: 6px 0; gap: 9px; }
  .fi-opt .txt { font-size: 12px; }
  .fi-opt .num { font-size: 8px; }
  .fi-in { font-size: 12px; }
  .fi-extra-lead { font-size: 7.5px; }

  /* El panel se abre pegado a los campos, no debajo de "Filtrar". */
  .filters { padding-bottom: 8px; }
  .f-apply { margin-top: 12px; }
  /* La barra de herramientas tenía DOS controles en un teléfono: "Ordenar ·
     Precio ↓ · Precio ↑" y "Vista · Fichas · Lista", y el de Vista se había
     escondido porque "Fichas / Lista" en palabras no entraba en 390px.
     Vuelve, pero como ÍCONO (grilla / renglones): ocupa lo que ocupa una flecha
     y la lista deja de ser una preferencia inalcanzable desde el teléfono. */
  .viewtog { display: flex; gap: 8px; }
  .viewtog .vt-opt[data-view="grid"] { display: inline-flex; }   /* la 3ª vista aparece SOLO en el teléfono */
  .viewtog .vw { display: none; }          /* la palabra se va… */
  .viewtog .vi { display: block; width: 14px; height: 14px; }   /* …y queda el ícono */
  .viewtog .vt-opt { padding: 3px 2px 6px; }

  /* "Precio ↓ / Precio ↑" repite la palabra dos veces para decir una sola cosa.
     En el teléfono queda la flecha sola: el rótulo "Ordenar" ya dice de qué se
     ordena, y al lado está la moneda. */
  .sorttog .sw { display: none; }
  .sorttog .sar { font-size: 12px; }

  .adv-row {
    padding-top: 20px;
    padding-bottom: 22px;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  /* Los tres controles (Moneda · Ordenar · Vista) en UN solo renglón: la fila ocupa
     todo el ancho y los reparte con space-between. Con la moneda en símbolos ($ · U$S)
     y los rótulos un punto más chicos, entran cómodos en un teléfono. */
  .togs {
    margin-bottom: 0;
    gap: 8px;
    align-self: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  /* Rótulos más chicos y con menos tracking para que los tres grupos entren en la línea. */
  .viewtog, .sorttog, .curtog { font-size: 7.5px; letter-spacing: .13em; }
  .sorttog, .curtog { gap: 10px; }
  /* La selección activa (p. ej. "$") tiene que captar la vista más rápido:
     además del subrayado dorado, gana peso para no verse tan discreta. */
  .vt-opt.on { font-weight: 600; }
  .catalog { padding-top: 26px; }

  /* ── Vista CUADRÍCULA (móvil): cuatro tarjetas más chicas, 2 columnas ──────
     La vista "card" es una tarjeta al ancho (1 columna, el default en el teléfono);
     esta es la variante compacta para recorrer muchos inmuebles de un vistazo.
     Se ocultan specs y compartir: en una tarjeta chica saturan. */
  .catalog.as-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 13px;
    row-gap: 30px;
  }
  .catalog.as-grid .item .meta { margin-top: 11px; }
  .catalog.as-grid .item .mrow { gap: 8px; }
  .catalog.as-grid .item h3 { font-size: 15px; margin-top: 8px; }
  .catalog.as-grid .item .loc { font-size: 8px; margin-top: 5px; }
  .catalog.as-grid .item .price { font-size: 11px; margin-top: 8px; }
  .catalog.as-grid .item .specs,
  .catalog.as-grid .item .share { display: none; }

  /* ── Footer ───────────────────────────────────────────────────
     En el home las columnas no colapsaban: los datos de contacto
     quedaban fuera de la pantalla, invisibles e intocables. */
  .foot-grid { grid-template-columns: 1fr; row-gap: 34px; }
  .foot-base { flex-direction: column; gap: 10px; text-align: center; }
}

/* ══ TRANSICIÓN ENTRE SECCIONES ═════════════════════════════════
   El motor original hace DOS gestos separados: la línea se traza (hasta 1,85s)
   y recién a los 1,95s empieza a desvanecerse. Entre una cosa y la otra la
   línea llega, SE QUEDA QUIETA y después se corta. De ahí la sensación de
   "movimiento → estancamiento → desaparición de golpe".

   Acá trazarse y disolverse son UN SOLO GESTO: la línea empieza a apagarse
   mientras todavía viaja, y nunca llega a quedarse fija. Es un trazo que pasa,
   no una línea que se dibuja y después se borra.

   Además, en 390px seis líneas son un enrejado: se dejan las impares. */
@media (max-width: 860px) {

  .vt-grid > span:nth-child(even)::after { display: none; }

  #vt.draw .vt-grid > span::after,
  #vt.draw .vt-grid > span:first-child::before {
    transition: none;
    animation: vtTrazo 2s cubic-bezier(.16, .8, .24, 1) both;
  }
  #vt.draw .vt-grid > span:nth-child(1)::after { animation-delay: 0s; }
  #vt.draw .vt-grid > span:nth-child(3)::after { animation-delay: .22s; }
  #vt.draw .vt-grid > span:nth-child(5)::after { animation-delay: .40s; }
  #vt.draw .vt-grid > span:first-child::before { animation-delay: .11s; }

  /* La salida también se disuelve: la retracción sola termina en seco. */
  #vt.retract .vt-grid > span::after,
  #vt.retract .vt-grid > span:first-child::before {
    transition: transform 1.15s cubic-bezier(.16, .8, .24, 1),
                opacity .95s ease;
    opacity: 0;
  }

  /* Si el motor apaga la grilla, que se apague despacio (ya viene en 0). */
  .vt-grid { transition: opacity 1.1s ease; }
}

@keyframes vtTrazo {
  0%   { transform: scaleY(0);  opacity: 0; }
  18%  {                        opacity: .5; }
  58%  { transform: scaleY(1);  opacity: .42; }
  100% { transform: scaleY(1);  opacity: 0; }   /* se apaga sin haberse detenido */
}

/* Piezas exclusivas del móvil: en escritorio manda la scrollcue centrada y el
   nav es una fila horizontal, donde la firma no tendría dónde vivir. */
@media (min-width: 861px) {
  .hcta, .navsign { display: none; }
}

@keyframes fuMovil {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* En pantallas sin cursor real, el hover del escritorio no debe dejar
   el menú "pegado" abierto después de un toque. */
@media (hover: none) {
  .navmenu:hover .navitem,
  .navmenu:focus-within .navitem { transition-delay: 0s; }
}