/* ====================================================================
 * ML · Pie de página                                            v1.0.0
 * --------------------------------------------------------------------
 * Los tokens son los mismos de `ml-listing` y `ml-zonas`. El pie viejo
 * usaba Ropa Sans y Roboto, que no aparecen en ninguna otra superficie
 * rediseñada del sitio: era el último rincón hablando otro idioma.
 *
 * TODOS los selectores empiezan por `.ml-pie`. En un bloque que sale en
 * las ~4,800 páginas, una regla suelta es un incendio en todo el sitio.
 * ==================================================================== */

.ml-pie {
  --ml-ink:   #0A0A0A;
  --ml-gold:  #C8A96E;
  --ml-serif: 'Cormorant Garamond', Georgia, serif;
  --ml-sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ml-pie-tenue: rgba(255, 255, 255, .62);
  --ml-pie-linea: rgba(255, 255, 255, .14);
  --ml-curva: cubic-bezier(.2, .75, .2, 1);

  background: var(--ml-ink);
  color: #fff;
  font-family: var(--ml-sans);
  font-size: 14px;
  line-height: 1.6;
}

.ml-pie-envoltura {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 24px 28px;
}

/* --- LAS TRES COLUMNAS ------------------------------------------- */

.ml-pie-rejilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.ml-pie-col { min-width: 0; }

.ml-pie-titulo {
  margin: 0 0 18px;
  font-family: var(--ml-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ml-gold) !important;
  line-height: 1.2 !important;
}

/* --- Marca -------------------------------------------------------- */

.ml-pie-logo { display: inline-block; }

.ml-pie-logo img {
  width: 230px;
  height: auto;
  max-width: 100%;
  display: block;
}

.ml-pie-lema {
  margin: 20px 0 24px;
  max-width: 34ch;
  font-family: var(--ml-serif);
  font-size: 19px;
  line-height: 1.45;
  color: var(--ml-pie-tenue);
}

.ml-pie-redes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ml-pie-redes a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ml-pie-tenue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ml-curva), border-color .25s var(--ml-curva);
}

.ml-pie-redes a:hover { color: #fff; border-bottom-color: var(--ml-gold); }

/* --- Explorar: la columna de enlaces internos --------------------- */

.ml-pie-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 24px;
}

.ml-pie-lista li { margin-bottom: 9px; break-inside: avoid; }

.ml-pie-lista a {
  font-family: var(--ml-serif);
  font-size: 17px;
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ml-curva), border-color .25s var(--ml-curva);
}

.ml-pie-lista a:hover { color: #fff; border-bottom-color: var(--ml-gold); }

/* --- Contacto ----------------------------------------------------- */

.ml-pie-nap {
  font-style: normal;
  margin: 0 0 14px;
  color: var(--ml-pie-tenue);
  line-height: 1.7;
}

.ml-pie-nap-nombre {
  display: block;
  color: #fff;
  font-weight: 500;
  letter-spacing: .02em;
}

.ml-pie-contacto-lineas { margin: 0 0 14px; line-height: 1.8; }

.ml-pie-contacto-lineas a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid var(--ml-pie-linea);
  transition: border-color .25s var(--ml-curva);
}

.ml-pie-contacto-lineas a:hover { border-bottom-color: var(--ml-gold); }

.ml-pie-horario {
  margin: 0;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ml-pie-tenue);
}

/* --- Credenciales -------------------------------------------------- */

.ml-pie-credenciales {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--ml-pie-linea);
}

.ml-pie-remax    { width: 150px; height: auto; }
.ml-pie-igualdad { width: 96px;  height: auto; }

.ml-pie-licencia {
  margin: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ml-pie-tenue);
  line-height: 1.7;
}

/* --- Barra baja ---------------------------------------------------- */

.ml-pie-barra {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--ml-pie-linea);
}

.ml-pie-legal {
  margin: 0 0 14px;
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--ml-pie-tenue);
  line-height: 1.9;
}

.ml-pie-legal a {
  color: var(--ml-pie-tenue);
  text-decoration: none;
  border-bottom: 1px solid var(--ml-pie-linea);
  transition: color .25s var(--ml-curva);
}

.ml-pie-legal a:hover { color: #fff; }

/* El resumen de la NOM 247. El texto íntegro vive en /nom-247/: la norma no
   obliga a desplegarlo, sólo a que figure (confirmado por Marvin el
   2026-08-14). Eran 429 px de alto en un teléfono, en cada página del sitio. */
.ml-pie-nom {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .40);
}

.ml-pie-nom a {
  color: rgba(255, 255, 255, .58);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  text-decoration: none;
}

.ml-pie-nom a:hover { color: #fff; }

/* ---- El aviso completo, ya en la página /nom-247/ ------------------ */

.ml-pie-aviso {
  max-width: 900px;
  margin: 40px auto 0;
  padding: 28px 24px 0;
  border-top: 1px solid var(--ml-line, #E5E1D8);
  font-family: 'Montserrat', -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #3A3833;
}

.ml-pie-aviso h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  color: #0A0A0A !important;
  margin: 24px 0 10px !important;
  line-height: 1.25 !important;
}

.ml-pie-aviso h2:first-child { margin-top: 0 !important; }
.ml-pie-aviso p { margin: 0 0 14px; }
.ml-pie-aviso a { color: #0A0A0A; }

@media (max-width: 767px) {
  .ml-pie-aviso { margin-top: 28px; padding: 22px 20px 0; font-size: 13.5px; }
  .ml-pie-aviso h2 { font-size: 21px !important; }
}

/* --- Tableta ------------------------------------------------------- */

@media (max-width: 1024px) {
  .ml-pie-rejilla { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ml-pie-marca   { grid-column: 1 / -1; }
}

/* --- Celular ------------------------------------------------------- */

/* --- Celular ------------------------------------------------------
 *
 * MEDIDO: apilar las tres columnas en una sola dejaba el pie en 1,341 px
 * contra los 1,370 del pie viejo — o sea, todo el trabajo de ordenarlo no
 * servía de nada justo donde más falta hace. Explorar y Contacto van EN
 * PAREJA, y las zonas pasan a una sola columna dentro de su mitad.
 */
@media (max-width: 767px) {
  .ml-pie-envoltura { padding: 38px 20px 22px; }

  .ml-pie-rejilla { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .ml-pie-marca   { grid-column: 1 / -1; }

  .ml-pie-logo img { width: 190px; }
  .ml-pie-lema { font-size: 17px; margin: 14px 0 18px; max-width: none; }

  .ml-pie-titulo { margin-bottom: 12px; }

  /* En media pantalla, dos columnas de zonas dejarían renglones de siete
     caracteres. Una sola, en cuerpo algo menor. */
  .ml-pie-lista { columns: 1; }
  .ml-pie-lista li { margin-bottom: 7px; }
  .ml-pie-lista a { font-size: 15.5px; }

  .ml-pie-nap, .ml-pie-contacto-lineas { font-size: 13px; }

  /* Los tres elementos de la fila de credenciales caían en tres renglones.
     En uno solo son 96 px menos. */
  .ml-pie-credenciales {
    margin-top: 28px;
    padding-top: 20px;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .ml-pie-remax    { width: 92px;  flex: none; }
  .ml-pie-igualdad { width: 62px;  flex: none; }
  .ml-pie-licencia { font-size: 10.5px; line-height: 1.5; text-align: left; }

  .ml-pie-barra { margin-top: 22px; padding-top: 16px; }
  .ml-pie-legal { font-size: 11px; line-height: 1.75; margin-bottom: 12px; }
  .ml-pie-nom { text-align: left; font-size: 10px; line-height: 1.5; }
}

/* Pantallas muy angostas: la pareja no cabe y vuelve a apilarse. */
@media (max-width: 359px) {
  .ml-pie-rejilla { grid-template-columns: 1fr; }
}