/*
 * Cabecera propia del sitio — paso 6 de la salida de Elementor.
 * ml-marco.php v1.0.0
 *
 * El pie tiene su propia hoja desde el 2026-08-14 (`ml-pie/ml-pie.css`), así que
 * aquí sólo está la cabecera. Los valores no se inventaron: se leyeron del CSS
 * compilado de la plantilla 673 (`uploads/elementor/css/post-673.css`) para que
 * la barra se vea igual el día que Elementor deje de dibujarla.
 */

/* ⚠️⚠️ ESTE @font-face ES OBLIGATORIO Y ES LA TRAMPA DEL PASO 6.
 *
 * «Trade Gothic» es una fuente personalizada de Elementor Pro, y su @font-face
 * lo emitía **el CSS compilado de la plantilla de la cabecera**
 * (`post-673.css`, bloque «Start Custom Fonts CSS»). Al dejar de dibujar esa
 * plantilla, ese archivo ya no se encola y la fuente **desaparece del sitio
 * entero** sin dar ningún error: el menú simplemente cae al sans-serif del
 * sistema. Aquí se declara igual, apuntando al mismo archivo. */
@font-face{
  font-family:'Trade Gothic';
  font-style:normal;
  font-weight:400;
  font-display:swap;   /* el original decía `auto`; con `swap` el menú se lee desde el primer pintado */
  src:url('https://mlrealtor.com.mx/wp-content/uploads/2024/09/Trade-Gothic-LT.ttf') format('truetype');
}

.ml-marco{
  --negro:#000;
  --tinta-menu:#fff;
  --alto:176px;          /* la cabecera de Elementor: logo de 96 px + la fila del menú */
  --alto-movil:72px;
  --desplegable:rgba(17,17,17,.94);
  background:var(--negro);
  position:relative;
  z-index:100;
  font-family:'Trade Gothic',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.ml-marco *{box-sizing:border-box}

/* ⭐ DOS FILAS, Y ES A PROPÓSITO: logo centrado arriba, menú centrado debajo.
   Es la disposición que tenía la cabecera de Elementor y que Marvin ya había
   aprobado; el paso 6 saca al constructor, no rediseña la barra. Si algún día
   se quiere una barra compacta de una sola fila, es un cambio deliberado y de
   diez minutos: `flex-direction:row` aquí y quitar el `margin:0 auto` del nav. */
.ml-marco__barra{
  display:flex;flex-direction:column;align-items:center;gap:0;
  min-height:var(--alto);
  padding:14px 24px 0;
}

/* ---------- el logo ---------- */
.ml-marco__logo{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0}
.ml-marco__logo img{display:block;width:auto;height:96px}

/* ---------- el menú, en escritorio ---------- */
.ml-marco__nav{margin:0 auto}
.ml-marco__menu{
  display:flex;align-items:center;gap:30px;
  list-style:none;margin:0;padding:0;
}
.ml-marco__menu li{position:relative;margin:0}
/* El relleno de 29 px a cada lado no es decorativo: es lo que tenía el widget
   (`post-673.css`, `padding-left/right:29px`) y es lo que hace que el menú ocupe
   el ancho que ocupaba. Sin él la barra se ve correcta pero encogida. */
.ml-marco__menu a{
  display:block;padding:13px 29px;
  color:var(--tinta-menu);text-decoration:none;
  font-size:14px;line-height:16px;font-weight:400;letter-spacing:1px;
}
/* El subrayado al pasar por encima: es el `e--pointer-underline` que tenía. */
.ml-marco__menu > li > a{position:relative}
.ml-marco__menu > li > a:after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;
  background:var(--tinta-menu);transform:scaleX(0);transform-origin:center;
  transition:transform .22s ease;
}
.ml-marco__menu > li > a:hover:after,
.ml-marco__menu > li > a:focus-visible:after,
.ml-marco__menu > li.current-menu-item > a:after,
.ml-marco__menu > li.current-menu-ancestor > a:after{transform:scaleX(1)}
.ml-marco a:focus-visible{outline:2px solid #C8A96E;outline-offset:3px}

/* la flechita de los que tienen submenú */
.ml-marco__menu .menu-item-has-children > a{padding-right:34px}
.ml-marco__menu .menu-item-has-children > a:before{
  content:"";position:absolute;right:18px;top:50%;width:6px;height:6px;
  margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
}

/* ---------- los desplegables ---------- */
.ml-marco__menu .sub-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  display:block;min-width:230px;margin:0;padding:6px 0;list-style:none;
  background:var(--desplegable);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease;
}
.ml-marco__menu > li:hover > .sub-menu,
.ml-marco__menu > li:focus-within > .sub-menu{opacity:1;visibility:visible;pointer-events:auto}
.ml-marco__menu .sub-menu a{
  padding:11px 22px;font-size:14px;font-weight:500;letter-spacing:1px;text-transform:uppercase;
  white-space:nowrap;
}
.ml-marco__menu .sub-menu a:hover,
.ml-marco__menu .sub-menu a:focus-visible{background:rgba(255,255,255,.08)}

/* ---------- el botón de hamburguesa ---------- */
.ml-marco__burger{
  display:none;margin-left:auto;
  width:44px;height:44px;padding:10px;   /* 44 px: el mínimo táctil, no es capricho */
  background:none;border:0;cursor:pointer;
}
.ml-marco__burger span{
  display:block;height:2px;background:#fff;border-radius:2px;
  transition:transform .22s ease,opacity .18s ease;
}
.ml-marco__burger span+span{margin-top:5px}
.ml-marco.is-abierto .ml-marco__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ml-marco.is-abierto .ml-marco__burger span:nth-child(2){opacity:0}
.ml-marco.is-abierto .ml-marco__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* botón que abre cada submenú DENTRO del cajón (lo inyecta el JS) */
.ml-marco__mas{
  display:none;position:absolute;top:0;right:0;
  width:52px;height:46px;padding:0;background:none;border:0;color:#fff;cursor:pointer;
}
.ml-marco__mas:after{
  content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-6px 0 0 -4px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .2s ease;
}
.ml-marco__mas[aria-expanded="true"]:after{transform:rotate(-135deg);margin-top:-2px}

/* ==========================================================
 * El corte es 1024 px, el mismo que tenía Elementor
 * (`elementor-nav-menu--dropdown-tablet`). Cambiarlo movería
 * el punto donde el menú se convierte en cajón.
 * ========================================================== */
@media (max-width:1024px){
  /* Por debajo del corte SÍ es una sola fila: logo a la izquierda, hamburguesa a
     la derecha, que es exactamente lo que hacía la cabecera vieja en el móvil. */
  .ml-marco__barra{flex-direction:row;align-items:center;min-height:var(--alto-movil);padding:0 14px 0 18px;gap:12px}
  .ml-marco__logo img{height:46px}
  .ml-marco__burger{display:block}

  .ml-marco__nav{
    position:absolute;left:0;right:0;top:100%;
    margin:0;background:#0A0A0A;border-top:1px solid #222;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .26s ease,visibility 0s linear .26s;
  }
  .ml-marco.is-abierto .ml-marco__nav{
    max-height:calc(100vh - var(--alto-movil));overflow-y:auto;visibility:visible;
    transition:max-height .26s ease;
  }
  .ml-marco__menu{display:block;gap:0;padding:6px 0 18px}
  .ml-marco__menu li{border-bottom:1px solid rgba(255,255,255,.07)}
  .ml-marco__menu a{padding:14px 20px;font-size:15px}   /* en el cajón manda el ancho, no el relleno del escritorio */
  .ml-marco__menu .menu-item-has-children > a:before{display:none}
  .ml-marco__mas{display:block}

  .ml-marco__menu .sub-menu{
    position:static;transform:none;min-width:0;background:rgba(255,255,255,.04);
    opacity:1;visibility:visible;pointer-events:auto;backdrop-filter:none;
    display:none;padding:0;
  }
  .ml-marco__menu .sub-menu.is-abierto{display:block}
  .ml-marco__menu .sub-menu a{padding:13px 20px 13px 36px;white-space:normal}
  .ml-marco__menu li:last-child{border-bottom:0}
  .ml-marco__menu > li > a:after{display:none}
}

/* Quien haya pedido menos movimiento, que no lo tenga. */
@media (prefers-reduced-motion:reduce){
  .ml-marco *,.ml-marco *:before,.ml-marco *:after{transition:none!important}
}

/* El contenedor del contenido. Sin estilos propios a propósito: sólo existe
   como punto de referencia y destino del salto. `outline:none` al recibir el
   foco porque lo recibe por programa, no por navegación: un recuadro alrededor
   de la página entera confunde más de lo que ayuda. */
.ml-marco-contenido{display:block}
.ml-marco-contenido:focus{outline:none}

/* El salto al contenido: invisible hasta que alguien lo enfoca con el teclado. */
.ml-marco-saltar{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 18px;background:#fff;color:#0A0A0A;font-size:14px;
}
.ml-marco-saltar:focus{left:0}