/* ==========================================================================
   MIRAMAX — hoja de estilos del sitio

   PALETA — monocroma (ver guia-color.html para verla funcionando)

   La página es blanco, una escala de grises fríos y negro. Punto. El único
   color que aparece en toda la interfaz es el azul de la acción, y los tres
   semánticos que informan un estado.

   La idea es que el color lo pongan las maquetas de producto —el cupón, la
   cuenta corriente, la ficha de la propiedad— apoyadas sobre escenarios
   grises. Una interfaz sin color hace que el contenido se vea nítido; una
   interfaz de colores compite con él.

   Los grises tienen un sesgo AZUL apenas perceptible (matiz 286, saturación
   0.003–0.006). No son grises neutros de laboratorio: si mirás #e8e8ed al
   lado de #e8e8e8, el primero se ve limpio y el segundo se ve sucio.

   Todo en OKLCH: al mover solo la luminosidad, el tono se mantiene
   perceptualmente parejo en toda la rampa.
   ========================================================================== */

:root {
  /* --- Rampa de neutros (fríos) --- */
  --n-0:   oklch(100%  0     0);        /* #ffffff — fondo base */
  --n-50:  oklch(98.6% 0.002 286);      /* #fafafc — fondo alterno */
  --n-100: oklch(97.0% 0.003 286);      /* #f5f5f7 — secciones */
  --n-200: oklch(92.6% 0.005 286);      /* #e8e8ed — tope del escenario */
  --n-300: oklch(86.4% 0.006 286);      /* #d2d2d7 — líneas y bordes */
  --n-400: oklch(79.4% 0.005 286);      /* #bebec1 — separadores fuertes */
  --n-500: oklch(60.4% 0.006 286);      /* #86868b — texto apagado */
  --n-600: oklch(52.4% 0.006 286);      /* #6e6e73 — texto secundario */
  --n-700: oklch(41.2% 0.005 286);      /* #515154 — texto de apoyo */
  --n-800: oklch(29.4% 0.005 286);      /* #333336 — texto de cuerpo */
  --n-900: oklch(21.0% 0.004 286);      /* #1d1d1f — titulares */
  --n-950: oklch(0%    0     0);        /* #000000 — fondo oscuro */

  /* --- El único color de la interfaz: azul de acción --- */
  --b-100: oklch(95.2% 0.028 250);      /* #e8f2fe — fondo suave */
  --b-300: oklch(70.8% 0.152 250);      /* #2997ff — sobre fondo oscuro */
  --b-500: oklch(56.4% 0.198 253);      /* #0071e3 — botón */
  --b-600: oklch(52.6% 0.186 253);      /* #0066cc — enlace sobre claro */
  --b-700: oklch(43.8% 0.158 253);      /* #0050a0 — presionado */
  --sobre-marca: oklch(100% 0 0);       /* el texto sobre el azul es blanco */

  /* --- Semánticos: solo para informar estado --- */
  --ok-600:  oklch(51.2% 0.108 165);    /* #0e7a55 — al día, emitida */
  --ok-300:  oklch(76.8% 0.135 165);    /* #35d0a0 */
  --av-600:  oklch(54.8% 0.168 45);     /* #c2410c — por vencer */
  --av-300:  oklch(76.4% 0.152 55);     /* #fb923c */
  --er-600:  oklch(50.4% 0.196 12);     /* #be123c — vencido, en mora */
  --er-300:  oklch(70.2% 0.168 15);     /* #fb7185 */

  /* --- Roles: lo que usa el resto de la hoja --- */
  --blanco: var(--n-0);
  --gris: var(--n-100);
  --tinta: var(--n-900);
  --tinta-2: var(--n-800);
  --tinta-3: var(--n-600);
  --linea: var(--n-300);
  --azul: var(--b-600);
  --accion: var(--b-500);
  --accion-honda: var(--b-700);
  --superficie: var(--n-0);
  --sombra: 0 4px 26px oklch(21% 0.004 286 / .10);
  --nav-bg: oklch(100% 0 0 / .8);
  --alerta: var(--er-600);
  --aviso: var(--av-600);
  --listo: var(--ok-600);

  /* El único lugar donde el sitio sale del blanco y negro: la calculadora.
     Ojo con el naranja saturado de fondo: en una interfaz significa
     "precaución", y un costo grande sobre naranja se lee como una alerta.
     Por eso el fondo es crema —papel, no aviso— y el amarillo y el naranja
     se reservan para las barras del gráfico, donde el color es dato y no
     estado. El número grande va en tinta negra, como el resto del sitio. */
  --crema: #fdf6ec;
  --crema-linea: #f0e2cd;
  --ambar-honda: #8f550a;    /* 5,6:1 sobre crema; el ámbar más claro no llegaba a AA */

  /* Rampa del gráfico, de lo que más pesa a lo que menos. Va más oscura de
     lo que pide el gusto porque un amarillo claro sobre crema desaparece:
     cada tramo tiene que verse sobre el fondo y distinguirse del vecino. */
  --dato-1: #b35309;
  --dato-2: #d9821d;
  --dato-3: #eda73f;
  --dato-4: #f0c272;

  /* La pila de apple.com, tal cual. En Mac y iPhone resuelve a SF Pro;
     en el resto cae en Helvetica Neue o Arial, igual que apple.com. */
  --sans: "SF Pro Display", "SF Pro Text", "SF Pro Icons", -apple-system,
          BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --page: 1060px;
  --gap: 20px;
  --radio: 18px;
}

/* Este sitio es blanco. No se adapta al modo oscuro del sistema a propósito:
   apple.com tampoco lo hace. Las secciones negras que hay son una decisión de
   diseño y aparecen igual en cualquier computadora, que es lo que las vuelve
   un acento en vez de un fondo. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* tokens locales de superficie; los reescribe cada .t-* */
  --bg: var(--blanco);
  --fg: var(--tinta);
  --fg-2: var(--tinta-3);
  --rule: var(--linea);
  --link: var(--azul);
  --surf: var(--superficie);
  --surf-rule: var(--linea);
  --acento: var(--accion);
  --acento-ink: var(--accion-honda);
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 8px;
}

img { max-width: 100%; height: auto; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 22px; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accion); color: var(--sobre-marca); padding: 10px 16px;
  border-radius: 0 0 10px 0; font-size: 14px; font-weight: 600;
}
.saltar:focus { left: 0; }

/* ---------- tonos de superficie ----------
   Cada tono reasigna los mismos seis roles, así los componentes de adentro
   (tablas, chips, maquetas) funcionan sobre cualquier fondo sin excepciones. */

.t-gris   { --bg: var(--gris); }
.t-negro  { --bg: var(--n-950); --fg: var(--n-100); --fg-2: var(--n-500); --rule: var(--n-800);
            --link: var(--b-300); --surf: var(--n-900); --surf-rule: var(--n-800);
            --acento: var(--b-300); --acento-ink: var(--b-300); }
.t-carbon { --bg: var(--n-900); --fg: var(--n-100); --fg-2: var(--n-500); --rule: var(--n-800);
            --link: var(--b-300); --surf: var(--n-800); --surf-rule: var(--n-700);
            --acento: var(--b-300); --acento-ink: var(--b-300); }
/* Tile claro: blanco sobre las secciones grises, con una línea finita.
   Reemplaza al viejo tile de color — en este sistema no hay tiles de color. */
.t-claro  { --bg: var(--n-0); --fg: var(--n-900); --fg-2: var(--n-600); --rule: var(--n-300);
            --link: var(--b-600); --surf: var(--n-50); --surf-rule: var(--n-300);
            --acento: var(--b-600); --acento-ink: var(--b-600);
            box-shadow: inset 0 0 0 1px var(--n-200); }

/* ---------- tipografía ---------- */

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--fg-2); margin: 0 0 14px;
}
.h1 { font-size: clamp(44px, 8.6vw, 96px); line-height: 1.02; font-weight: 600;
      letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.h2 { font-size: clamp(32px, 5.6vw, 64px); line-height: 1.06; font-weight: 600;
      letter-spacing: -.029em; margin: 0; text-wrap: balance; }
.h3 { font-size: clamp(20px, 2.6vw, 28px); line-height: 1.18; font-weight: 600;
      letter-spacing: -.018em; margin: 0; text-wrap: balance; }
.h4 { font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: -.011em; margin: 0; }

.lede { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; letter-spacing: -.008em;
        color: var(--fg-2); margin: 14px 0 0; max-width: 42ch; }
.note { font-size: 13.5px; line-height: 1.62; color: var(--fg-2); margin: 10px 0 0; max-width: 52ch; }
.texto { font-size: 15.5px; line-height: 1.72; color: var(--fg-2); max-width: 70ch; }
.texto strong { color: var(--fg); font-weight: 600; }

.center { text-align: center; }
.center .lede, .center .note, .center .texto { margin-left: auto; margin-right: auto; }

.chev { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; letter-spacing: -.008em; }
.chev::after { content: "\203A"; font-size: 21px; line-height: 1; transform: translateY(-1px); }
.chev:hover { text-decoration: none; }
.chev:hover span { text-decoration: underline; }
.links { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 18px; }
.center .links { justify-content: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px; border-radius: 980px;
  background: var(--fg); color: var(--bg);
  font-size: 15px; font-weight: 500; letter-spacing: -.008em; white-space: nowrap;
  border: 0; cursor: pointer; font-family: inherit;
}
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn.fantasma { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--rule); }
.btn.fantasma:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); filter: none; }
.btn-fila { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.center .btn-fila { justify-content: center; }

/* ---------- barra de navegación ---------- */

.nav {
  position: sticky; top: 0; z-index: 60; height: 48px;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linea);
}
.nav-in { max-width: var(--page); margin: 0 auto; padding: 0 22px; height: 100%;
          display: flex; align-items: center; gap: 24px; }
.marca { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600;
         letter-spacing: -.01em; color: var(--tinta); white-space: nowrap; }
.marca:hover { text-decoration: none; }
.marca .glifo {
  width: 23px; height: 23px; border-radius: 7px; background: var(--tinta); color: var(--blanco);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: -.02em;
}
.nav-links { display: flex; gap: 22px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { font-size: 12.5px; color: var(--tinta); opacity: .82; white-space: nowrap; }
.nav-links a:hover { opacity: 1; text-decoration: none; }
.nav-links a[aria-current="page"] { opacity: 1; font-weight: 600; }
.nav-links a.destacado { color: var(--azul); opacity: 1; font-weight: 500; }

/* ---------- encabezado de página interior ---------- */

.cabecera { padding: 104px 0 10px; text-align: center; }
.cabecera .lede { margin-inline: auto; max-width: 42ch; }

.migas { font-size: 12px; color: var(--tinta-3); padding: 20px 0 0; }
.migas a { color: var(--tinta-3); }

/* ---------- bloques ---------- */

.mosaico { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); margin-top: var(--gap); }
.mosaico.tres { grid-template-columns: repeat(3, 1fr); }

.tile {
  background: var(--bg); color: var(--fg); border-radius: var(--radio);
  padding: 40px 32px 38px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.tile.ancho { grid-column: 1 / -1; }
.tile.izq { align-items: flex-start; text-align: left; }
.tile-art { margin-top: 26px; width: 100%; display: flex; justify-content: center;
            align-items: flex-end; flex: 1; }

.banda { background: var(--bg); color: var(--fg); border-radius: var(--radio);
         padding: 84px 34px; margin-top: var(--gap); text-align: center; }

.seccion { padding-top: 118px; }
.seccion-tit { margin-bottom: 36px; }

/* ---------- maquetas de producto ---------- */

.device {
  width: 100%; max-width: 520px; background: var(--surf);
  border: 1px solid var(--surf-rule); border-radius: 18px;
  box-shadow: var(--sombra); overflow: hidden; text-align: left; font-size: 13px;
}
.device.xl { max-width: 640px; }
.device-bar { display: flex; align-items: center; gap: 6px; padding: 9px 13px;
              border-bottom: 1px solid var(--surf-rule); }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--surf-rule); }
.device-tit { margin-left: 8px; font-size: 10px; letter-spacing: .09em;
              text-transform: uppercase; color: var(--fg-2); }
.device-body { padding: 16px 18px 18px; }

.fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
        padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--surf-rule) 65%, transparent); }
.fila:last-child { border-bottom: 0; }
.fila .k { color: var(--fg-2); }
.fila .v { font-variant-numeric: tabular-nums; }
.fila.total { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--surf-rule);
              border-bottom: 0; font-weight: 600; font-size: 15px; }

.cabe { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.cabe .uf { font-size: 17px; font-weight: 600; letter-spacing: -.016em; }
.cabe .per { font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
             color: var(--fg-2); margin-top: 2px; }

.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px;
        font-weight: 600; letter-spacing: .015em; white-space: nowrap;
        background: color-mix(in srgb, var(--acento) 20%, transparent); color: var(--acento-ink); }
.chip.alerta { background: color-mix(in srgb, var(--alerta) 15%, transparent); color: var(--alerta); }
.chip.listo  { background: color-mix(in srgb, var(--listo) 16%, transparent); color: var(--listo); }

.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th { text-align: right; font-size: 10px; font-weight: 600; letter-spacing: .08em;
            text-transform: uppercase; color: var(--fg-2); padding: 0 0 8px;
            border-bottom: 1px solid var(--surf-rule); }
.tabla th:first-child { text-align: left; }
.tabla td { padding: 8px 0; text-align: right; font-variant-numeric: tabular-nums;
            border-bottom: 1px solid color-mix(in srgb, var(--surf-rule) 60%, transparent); }
.tabla td:first-child { text-align: left; font-variant-numeric: normal; }
.tabla tr:last-child td { border-bottom: 0; font-weight: 600; }
.scroll-x { width: 100%; overflow-x: auto; }

.barras { display: flex; align-items: flex-end; gap: 10px; height: 108px; }
.barra { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; }
.barra i { display: block; border-radius: 6px 6px 3px 3px;
           background: color-mix(in srgb, var(--acento) 34%, transparent);
           transform-origin: bottom; animation: crecer .75s cubic-bezier(.2, .7, .3, 1) both; }
.barra.fuerte i { background: var(--acento); }
.barra b { font-size: 10px; font-weight: 500; color: var(--fg-2); text-align: center; }
@keyframes crecer { from { transform: scaleY(.04); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* teléfono */
.fono { width: 264px; flex: none; background: var(--surf); border: 1px solid var(--surf-rule);
        border-radius: 38px; padding: 12px; box-shadow: var(--sombra); text-align: left; }
.fono-pant { border-radius: 27px; background: color-mix(in srgb, var(--fg) 5%, var(--surf));
             padding: 16px 15px 18px; min-height: 376px; display: flex; flex-direction: column; gap: 12px; }
.fono-muesca { width: 72px; height: 5px; border-radius: 999px;
               background: color-mix(in srgb, var(--fg) 20%, transparent); margin: 0 auto 12px; }
.fono-tit { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.ficha { background: var(--surf); border: 1px solid var(--surf-rule); border-radius: 16px;
         padding: 13px 14px; font-size: 12.5px; }
.fono-cta { margin-top: auto; text-align: center; background: var(--accion); color: var(--sobre-marca);
            border-radius: 14px; padding: 12px; font-size: 14px; font-weight: 600; }
.cifra { font-size: 27px; font-weight: 600; letter-spacing: -.028em; font-variant-numeric: tabular-nums; }

/* ---------- fichas de propiedad ---------- */

.grilla-props { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.prop {
  background: var(--surf); border: 1px solid var(--surf-rule); border-radius: 20px;
  overflow: hidden; box-shadow: var(--sombra); text-align: left;
  display: flex; flex-direction: column;
}
.prop-foto { height: 150px; display: grid; place-items: center; position: relative;
             background: linear-gradient(135deg,
               color-mix(in srgb, var(--acento) 30%, var(--surf)),
               color-mix(in srgb, var(--acento) 6%, var(--surf))); }
.prop-foto span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
                  font-weight: 600; color: var(--fg-2); }
.prop-estado { position: absolute; top: 12px; right: 12px; }
.prop-cuerpo { padding: 16px 17px 18px; display: flex; flex-direction: column; flex: 1; }
.prop-cuerpo .dir { font-size: 16px; font-weight: 600; letter-spacing: -.016em; }
.prop-cuerpo .datos { margin-top: 5px; font-size: 13px; color: var(--fg-2); }
.prop-cuerpo .precio { margin-top: 12px; font-size: 20px; font-weight: 600;
                       letter-spacing: -.022em; font-variant-numeric: tabular-nums; }
.prop-cuerpo .precio small { font-size: 12px; font-weight: 400; color: var(--fg-2); }
.prop-cuerpo .links { margin-top: auto; padding-top: 14px; }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 26px 0 30px; }
.filtro {
  font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: -.005em;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linea); background: transparent; color: var(--tinta);
}
.filtro:hover { background: color-mix(in srgb, var(--tinta) 5%, transparent); }
.filtro[aria-pressed="true"] { background: var(--accion); border-color: var(--accion); color: var(--sobre-marca); }

/* ---------- métricas ---------- */

.metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 20px; margin-top: 44px; }
.metricas.cuatro { grid-template-columns: repeat(4, 1fr); }
.metrica .n { font-size: clamp(33px, 5.2vw, 54px); font-weight: 600; letter-spacing: -.034em;
              line-height: 1; font-variant-numeric: tabular-nums; }
.metrica .n.vacio { color: var(--fg-2); opacity: .5; }
.metrica .l { margin-top: 11px; font-size: 14.5px; color: var(--fg-2); line-height: 1.4; }

/* ---------- pasos ---------- */

/* auto-fit y no repeat(3): hay trámites de tres pasos y otros de cuatro, y
   con tres columnas fijas el cuarto quedaba solo en una fila. */
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
         gap: var(--gap); counter-reset: paso; }
.paso { background: var(--bg); color: var(--fg); border-radius: var(--radio); padding: 30px 26px 32px; }
.paso::before { counter-increment: paso; content: "Paso " counter(paso); display: block;
                font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
                color: var(--acento-ink); margin-bottom: 14px; }
.paso h4 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.018em; }
.paso p { margin: 9px 0 0; font-size: 14.5px; color: var(--fg-2); line-height: 1.5; }

/* lista con tildes */
.tildes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px;
          font-size: 15.5px; line-height: 1.45; }
/* El ítem es un bloque común y la tilde cuelga al margen. Con flex, el
   <strong> y el texto que le sigue se vuelven dos cajas separadas y el
   párrafo se parte en dos columnas en vez de leerse corrido. */
.tildes li { position: relative; padding-left: 24px; color: var(--fg-2); }
.tildes li::before { content: "\2713"; position: absolute; left: 0; top: 0;
                     color: var(--acento-ink); font-weight: 700; }
.tildes strong { color: var(--fg); font-weight: 600; }

/* ---------- preguntas ---------- */

.faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 4px; font-size: 19px;
               font-weight: 500; letter-spacing: -.016em;
               display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; color: var(--azul); line-height: 1;
                      flex: none; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 22px; padding-right: 44px; font-size: 15.5px; line-height: 1.55; color: var(--tinta-3); }

/* ---------- formulario ---------- */

.form { display: grid; gap: 16px; text-align: left; width: 100%; max-width: 460px; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: 12px; font-weight: 600; letter-spacing: .06em;
               text-transform: uppercase; color: var(--fg-2); }
.campo input, .campo select, .campo textarea {
  font-family: inherit; font-size: 16px; letter-spacing: -.01em;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--surf-rule); background: var(--surf); color: var(--fg);
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--fg-2); opacity: .7; }
.form .aviso { font-size: 12.5px; color: var(--fg-2); line-height: 1.45; margin: 0; }

/* ---------- documento legal ---------- */

.doc { max-width: 720px; margin: 0 auto; padding-top: 40px; }
.doc h2 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin: 42px 0 12px; }
.doc h2:first-of-type { margin-top: 0; }
.doc p, .doc li { font-size: 16.5px; line-height: 1.62; color: var(--tinta-3); }
.doc ul { padding-left: 20px; display: grid; gap: 8px; }
.doc .fecha { font-size: 13px; color: var(--tinta-3); }

/* ---------- pie ---------- */

.pie { margin-top: 90px; background: var(--gris); border-top: 1px solid var(--linea);
       font-size: 12px; line-height: 1.55; color: var(--tinta-3); }
.pie-in { max-width: var(--page); margin: 0 auto; padding: 30px 22px 46px; }
.pie-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding: 24px 0;
            border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.pie h5 { margin: 0 0 11px; font-size: 12px; font-weight: 600; color: var(--tinta); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie ul a { color: var(--tinta-3); }
.pie-legal { padding-top: 20px; }

/* ---------- movimiento ---------- */

/* El contenido es visible por defecto: si el JavaScript no corre, la página
   se ve igual. La animación se activa solo cuando app.js marca <html>. */
.anima .sube { opacity: 0; transform: translateY(28px);
               transition: opacity .75s cubic-bezier(.2, .7, .3, 1),
                           transform .75s cubic-bezier(.2, .7, .3, 1); }
.anima .sube.ok { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .anima .sube { opacity: 1; transform: none; transition: none; }
  .barra i { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .mosaico, .mosaico.tres, .grilla-props { grid-template-columns: 1fr; }
  .pasos { grid-template-columns: 1fr; }
  .metricas, .metricas.cuatro { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .pie-cols { grid-template-columns: repeat(2, 1fr); }
  .tile { padding: 38px 22px 30px; }
  .banda { padding: 56px 22px; }
  .cabecera { padding-top: 48px; }
  .seccion { padding-top: 62px; }
}

@media (max-width: 540px) {
  .metricas, .metricas.cuatro { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LA FOTO Y LO DEMAS
   Menos piezas, mas aire. Se fueron las escenas con degradado, la barra de
   capitulos, la galeria horizontal y el selector de acabado: cada una sumaba
   ruido y ninguna sumaba informacion.
   ========================================================================== */

:root {
  --curva: cubic-bezier(.4, 0, .6, 1);
  --rapido: .24s;
  --normal: .32s;
  --lento: .64s;
}

/* ---------- portada tipografica ----------
   Sin imagen: el titular es la imagen. Ocupa casi toda la primera pantalla,
   que es exactamente lo que hace Apple cuando no tiene producto que mostrar. */

.portada {
  text-align: center;
  padding: clamp(56px, 9vw, 118px) 0 clamp(40px, 6vw, 76px);
}
.portada .lede { margin-inline: auto; max-width: 34ch; }
.portada .btn-fila { justify-content: center; margin-top: 30px; }

/* ---------- pilares ----------
   Tres columnas separadas por una linea fina. Sin cajas: una caja alrededor
   de tres frases cortas es peso que no hace falta. */

.pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 42px;
}
.pilar { padding-top: 22px; border-top: 1px solid var(--linea); }
.pilar h3 { margin: 0 0 8px; }
.pilar p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--tinta-3); }
.pilar .links { margin-top: 14px; }

@media (max-width: 760px) {
  .pilares { grid-template-columns: 1fr; gap: 0; }
  .pilar { margin-top: 26px; }
}

/* ---------- comparacion ---------- */

.comparar { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 30px; }
.comparar th, .comparar td { padding: 15px 14px; text-align: left; vertical-align: top;
                             border-bottom: 1px solid var(--linea); }
/* La columna nuestra, apenas resaltada: sobre blanco alcanza con un gris. */
.comparar thead th:last-child,
.comparar tbody td:last-child { background: var(--gris); }
.comparar thead th:last-child { border-bottom-color: var(--n-400); }
.comparar thead th span {
  display: block; font-size: 10px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fg-2); margin-bottom: 6px;
}
.comparar thead th b { font-size: 16px; font-weight: 600; letter-spacing: -.012em; }
.comparar tbody th { font-weight: 500; color: var(--fg); width: 28%; }
.comparar td { color: var(--fg-2); }
.comparar .si { color: var(--listo); font-weight: 600; }
.comparar .no { opacity: .55; }

/* ---------- pasos largos ----------
   Numerados de verdad, porque acá el orden importa: son un procedimiento,
   no una lista de beneficios. */

.pasos-largos { counter-reset: tramo; display: grid; gap: 0; max-width: 720px; margin: 0 auto; }
.paso-largo {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 0 20px;
  padding: 28px 0;
  border-top: 1px solid var(--linea);
}
.paso-largo::before {
  counter-increment: tramo;
  content: counter(tramo);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--tinta-3); padding-top: 4px;
  font-variant-numeric: tabular-nums;
}
.paso-largo h3 { margin: 0; }
.paso-largo .note { margin-top: 8px; max-width: none; }
.paso-largo .links { margin-top: 12px; }

@media (max-width: 620px) {
  .paso-largo { grid-template-columns: 1fr; gap: 6px; }
  .paso-largo::before { padding-top: 0; }
}

/* ---------- barra de confianza ----------
   Los cuatro datos que un consorcio mira antes de llamar. Van arriba de todo
   porque son lo que decide si sigue leyendo. */

.confianza {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 30px 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.confianza div { text-align: center; }
.confianza b {
  display: block; font-size: 26px; font-weight: 600; letter-spacing: -.022em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.confianza b.vacio { color: var(--tinta-3); opacity: .45; }
.confianza span { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: var(--tinta-3); }

@media (max-width: 700px) {
  .confianza { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
}

/* ---------- honorario ----------
   Publicar el precio es la decisión comercial más fuerte del sitio: nadie en
   el rubro lo hace, y es el primer bloqueo de toda conversación. */

.precio-caja {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: 8px; margin-top: 24px;
}
.precio-caja .monto {
  font-size: clamp(34px, 5vw, 46px); font-weight: 600;
  letter-spacing: -.028em; line-height: 1; font-variant-numeric: tabular-nums;
}
.precio-caja .unidad { font-size: 15px; color: var(--fg-2); }

/* ---------- WhatsApp ----------
   Flotante y discreto. En Argentina es el canal que realmente contesta la
   gente, y llega con el mensaje ya escrito para que no haya que pensarlo. */

.wapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px 11px 14px;
  border-radius: 999px;
  background: var(--n-900);
  color: var(--n-0);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.008em;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
  transition: transform var(--rapido) var(--curva), opacity var(--rapido) var(--curva);
}
.wapp:hover { text-decoration: none; opacity: .9; transform: translateY(-1px); }
.wapp svg { width: 18px; height: 18px; flex: none; fill: currentColor; }

@media (max-width: 600px) {
  .wapp { right: 14px; bottom: 14px; padding: 12px; }
  .wapp span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wapp:hover { transform: none; }
}

/* ==========================================================================
   PUBLICACIONES — formato Airbnb
   Tarjetas sin caja ni borde: la foto redondeada es la que arma el bloque, y
   debajo van cuatro renglones de jerarquía decreciente. Es lo que hace que
   una grilla de publicaciones se lea rápido: el ojo salta de foto a foto y
   solo baja al texto cuando algo le llamó la atención.
   ========================================================================== */

.grilla-pub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 30px 20px;
  margin-top: 8px;
}

.pub { display: block; color: inherit; }
.pub:hover { text-decoration: none; }
.pub:hover .pub-foto img { transform: scale(1.04); }

.pub-foto {
  position: relative;
  aspect-ratio: 20 / 19;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gris);
}
.pub-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--curva);
}

/* Sin fotos cargadas todavía: en vez de un hueco, una superficie con el tipo
   de propiedad. Cuando el panel cargue las fotos, esto desaparece solo. */
.pub-vacia {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 6px;
  background: linear-gradient(160deg, var(--n-200), var(--n-100));
  color: var(--tinta-3);
}
.pub-vacia b { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pub-vacia span { font-size: 11px; opacity: .7; }

.pub-estado {
  position: absolute; top: 10px; left: 10px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--n-0); color: var(--n-900);
  font-size: 11.5px; font-weight: 600; letter-spacing: -.005em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
}
.pub-estado.reservada { background: var(--n-900); color: var(--n-0); }

.pub-cuerpo { padding-top: 12px; }
.pub-tit {
  font-size: 15px; font-weight: 600; letter-spacing: -.012em; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pub-dato { font-size: 14px; line-height: 1.45; color: var(--tinta-3); margin-top: 3px; }
.pub-precio { margin-top: 7px; font-size: 15px; }
.pub-precio b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pub-precio span { color: var(--tinta-3); }

.pub-vacio-total { padding: 60px 0; text-align: center; }

/* ---------- ficha ampliada ----------
   Se abre sobre la grilla en vez de llevar a otra página: quien está mirando
   publicaciones quiere volver a la lista enseguida. */

.ficha[open] {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  /* La fila arranca en cero para que pueda achicarse. Sin este minmax, el
     lado del texto crece hasta el tamaño de su contenido, se pasa del alto
     del diálogo y el precio con el botón quedan cortados abajo. */
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  /* Grande a propósito: cuanto más entra sin scrollear, menos hay que
     recorrer con el mouse para ver una propiedad completa. */
  width: min(1220px, calc(100vw - 28px));
  height: min(94vh, 880px);
  min-height: min(460px, 92vh);
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
}
.ficha::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }

.ficha-media { position: relative; background: var(--gris); min-height: 0; overflow: hidden; }
.ficha-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* min-height: 0 es lo que le permite achicarse por debajo de su contenido; sin
   eso el overflow-y nunca se activa y el scroll no aparece nunca. */
.ficha-texto { padding: 30px 30px 26px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ficha-texto h3 { margin: 0; }
.ficha-barrio { font-size: 13.5px; color: var(--tinta-3); margin-top: 6px; }

/* Cuatro columnas en vez de dos: con el diálogo más ancho entran, y así el
   bloque ocupa la mitad de alto y hay menos que scrollear. */
.ficha-specs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 20px 0; padding: 16px 0;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
#ficha-foto { width: 100%; height: 100%; }
.ficha-specs div { font-size: 13.5px; }
.ficha-specs b { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ficha-specs span { color: var(--tinta-3); }

.ficha-desc { font-size: 14.5px; line-height: 1.65; color: var(--tinta-2); }

.ficha-servicios { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.ficha-servicios li {
  font-size: 12.5px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--linea); color: var(--tinta-3);
}

.ficha-precio {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linea);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px;
}
.ficha-precio .monto { font-size: 26px; font-weight: 600; letter-spacing: -.022em; font-variant-numeric: tabular-nums; }
.ficha-precio .detalle { font-size: 13px; color: var(--tinta-3); }

/* ---------- galería de la ficha ----------
   Con diez fotos una tira fija no entra: hacen falta flechas, contador y una
   tira que se desplace sola hasta la que está viéndose. */

.ficha-media { display: flex; flex-direction: column; }
.ficha-marco { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ficha-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ficha-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--n-900);
  font-size: 19px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .28);
  transition: transform var(--rapido) var(--curva);
}
.ficha-flecha:hover { transform: translateY(-50%) scale(1.07); }
.ficha-flecha.izq { left: 12px; }
.ficha-flecha.der { right: 12px; }

.ficha-contador {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(0, 0, 0, .62); color: #fff;
  font-size: 12px; font-variant-numeric: tabular-nums;
}

.ficha-tiras {
  flex: none; display: flex; gap: 6px;
  padding: 8px; overflow-x: auto; scrollbar-width: none;
  background: var(--n-100);
}
.ficha-tiras::-webkit-scrollbar { display: none; }
.ficha-tiras button {
  flex: none; width: 62px; height: 48px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 7px;
  overflow: hidden; background: none; line-height: 0;
  transition: border-color var(--rapido) var(--curva), opacity var(--rapido) var(--curva);
  opacity: .62;
}
.ficha-tiras button:hover { opacity: 1; }
.ficha-tiras button[aria-current="true"] { border-color: var(--n-900); opacity: 1; }
.ficha-tiras img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ficha-cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--n-0); color: var(--n-900);
  font-size: 17px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .22);
}

@media (max-width: 900px) {
  /* En una columna: la galería queda fija arriba y solo scrollea el texto. Si
     scrolleara el diálogo entero, el botón de cerrar se iría de pantalla. */
  .ficha[open] {
    grid-template-columns: 1fr;
    /* En celular la galería cede altura: el texto es lo que hay que leer, y
       las fotos igual se recorren de a una. */
    grid-template-rows: 36vh minmax(0, 1fr);
    width: calc(100vw - 20px);
    height: 94vh;
    min-height: 0;
  }
  .ficha-texto { padding: 22px 20px 24px; }
  .ficha-tiras button { width: 52px; height: 40px; }
  .ficha-flecha { width: 34px; height: 34px; }
}

/* ---------- micro-movimiento ----------
   Lo unico que se mueve es lo justo: el boton al apretarlo y los bloques al
   aparecer. Nada gira, nada late, nada barre la pantalla. */

.btn { transition: transform var(--rapido) var(--curva), opacity var(--rapido) var(--curva); }
.btn:hover { opacity: .86; }
.btn:active { transform: scale(.985); }

.anima .sube { transition-timing-function: var(--curva); transition-duration: var(--lento); }


/* ==========================================================================
   OPERACIÓN: ALQUILER O VENTA
   ========================================================================== */

/* La marca de operación va arriba a la derecha porque arriba a la izquierda
   ya vive la de estado, y las dos pueden aparecer juntas. */
.pub-op {
  position: absolute; top: 10px; right: 10px;
  padding: 5px 11px; border-radius: 999px;
  background: oklch(100% 0 0 / .92); color: var(--n-900);
  font-size: 11.5px; font-weight: 600; letter-spacing: -.005em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
}
/* La marca de venta es negra y no naranja: al lado de la de estado
   ("Reservada") un chip naranja se leería como una advertencia. */
.pub-op.venta { background: var(--n-900); color: var(--n-0); }

/* La segunda fila de filtros pesa menos que la primera: primero se elige si
   se alquila o se compra, y recién después qué clase de propiedad. */
.filtros.chicos { margin: -16px 0 30px; }
.filtros.chicos .filtro { font-size: 12.5px; padding: 6px 13px; color: var(--tinta-3); }

.ficha-acciones { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ficha-acciones .chev[hidden] { display: none; }

/* ==========================================================================
   CALCULADORA DE INGRESO
   ========================================================================== */

.calc { display: grid; grid-template-columns: 1fr .88fr; gap: 30px; align-items: start; }

.calc-form { display: grid; gap: 18px; }
.calc-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.calc-campo label {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--fg);
}
.calc-campo input, .calc-campo select {
  width: 100%; font-family: inherit; font-size: 16px; padding: 11px 13px;
  border: 1px solid var(--rule); border-radius: 11px;
  background: var(--bg); color: var(--fg);
}
.calc-campo .pista { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--fg-2); }

.calc-avanzado { margin-top: 2px; border-top: 1px solid var(--rule); padding-top: 16px; }
.calc-avanzado summary {
  list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--link);
}
.calc-avanzado summary::-webkit-details-marker { display: none; }
.calc-avanzado summary::after { content: " +"; }
.calc-avanzado[open] summary::after { content: " −"; }
.calc-avanzado .calc-fila { margin-top: 16px; }

/* El panel es lo único cálido de la página, pero en crema: el calor está en
   el papel y en las barras, no detrás del número. Se queda pegado al borde
   superior mientras se tocan los campos, para que el total cambie a la vista
   y no haya que bajar a buscarlo. */
.calc-panel {
  position: sticky; top: 84px;
  padding: 26px; border-radius: var(--radio);
  background: var(--crema);
  border: 1px solid var(--crema-linea);
  color: var(--tinta);
}
.calc-panel .eyebrow { color: var(--ambar-honda); }

.calc-total {
  margin: 6px 0 2px; font-size: clamp(32px, 4.6vw, 46px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.04; font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
.calc-sub { font-size: 14px; color: var(--tinta-3); }

.calc-barra {
  display: flex; height: 12px; margin: 22px 0 16px;
  border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, .06);
}
.calc-barra span { display: block; height: 100%; transition: width .3s cubic-bezier(.4, 0, .6, 1); }

.calc-detalle { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14.5px; }
.calc-detalle li { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.calc-detalle .izq { display: flex; align-items: center; gap: 9px; min-width: 0; }
.calc-detalle .punto { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.calc-detalle b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-detalle li[hidden] { display: none; }

.calc-cuotas { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--crema-linea); }
.calc-cuotas .n {
  font-size: 27px; font-weight: 700; letter-spacing: -.022em; font-variant-numeric: tabular-nums;
}
.calc-nota { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--tinta-3); }
.calc-nota a { color: var(--ambar-honda); text-decoration: underline; }

/* Acá el amarillo y el naranja son dato, no estado: cada tramo es una parte
   del total, de la que más pesa a la que menos. Leído como gráfico, el
   color informa; usado de fondo, alarmaría. */
.t-s1 { background: var(--dato-1); }
.t-s2 { background: var(--dato-2); }
.t-s3 { background: var(--dato-3); }
.t-s4 { background: var(--dato-4); }

@media (max-width: 880px) {
  .calc { grid-template-columns: 1fr; }
  .calc-panel { position: static; }
}
@media (max-width: 520px) {
  .calc-fila { grid-template-columns: 1fr; }
}

/* ==========================================================================
   OPCIONES — mismas cajas que los pasos, pero sin numerar

   Los pasos se numeran solos con un contador. Para listas donde el orden no
   significa nada —las formas de garantía, las tres puertas de entrada de la
   portada— numerar sería mentir: dirían "paso 1, paso 2" cuando en realidad
   son alternativas. Además se acomodan solas a dos, tres o cuatro columnas.
   ========================================================================== */

.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: var(--gap); }
.opcion { background: var(--bg); color: var(--fg); border-radius: var(--radio); padding: 30px 26px 32px; }
.opcion h4 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.018em; }
.opcion p { margin: 9px 0 0; font-size: 14.5px; color: var(--fg-2); line-height: 1.5; }
.opcion .links { margin-top: 16px; }

/* Cuando son cuatro, tres columnas dejan una sola abajo: mejor dos y dos. */
.opciones.cuatro { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

/* El tono crema, para la sección de la calculadora en la portada. */
.t-crema { --bg: var(--crema); --rule: var(--crema-linea);
           --surf: var(--crema); --surf-rule: var(--crema-linea);
           --link: var(--ambar-honda); }

@media (max-width: 760px) {
  .pasos { grid-template-columns: 1fr; }
}