/* Mack Nav — CSS dedicado al shortcode [mack_nav] (HTML plano, templates/nav.php).
   Sin capas de compatibilidad con widgets de Elementor: acá los <li>/<a>/<button>
   son reales, así que los selectores van directo, sin :is()/.elementor-*.
   Actualizado 2026-09-05 según mack-hero-nav-v3.html (Claude Design). */

/* position:fixed, no sticky: el <body> del sitio trae overflow-x:clip (lo pone
   Elementor/el tema, no nosotros) y eso rompe position:sticky en cualquier
   ancestro — el header "desaparece" al hacer scroll. fixed es inmune a eso,
   y de paso ocupa el ancho completo sin necesitar el truco de 100vw. */
.mhv-sitehead{position:fixed;top:0;left:0;right:0;z-index:999999;background:var(--mhv-paper);
  border-bottom:1px solid var(--mhv-hair);transition:box-shadow .25s ease}
.mhv-sitehead.mhv-scrolled{box-shadow:0 1px 14px rgba(17,20,24,.08)}
/* como el header ya no reserva su espacio en el flujo normal (fixed lo saca del
   documento), hay que empujar el contenido de la página hacia abajo la misma
   altura (nav + barra superior) para que no quede tapado debajo. */
body{padding-top:calc(var(--mhv-nav-h, 78px) + var(--mhv-util-h, 30px))}

/* ---------- barra superior: blanca, separada solo por una línea fina ---------- */
.mhv-util{height:var(--mhv-util-h);display:flex;align-items:center;justify-content:flex-end;gap:20px;padding:0 var(--mhv-gutter);
  background:var(--mhv-paper);border-bottom:1px solid var(--mhv-hair-2);
  font-family:var(--mhv-helv);font-size:13px;font-weight:400;letter-spacing:.015em;
  color:var(--mhv-mute);overflow:hidden;transition:height .25s ease}
.mhv-sitehead.mhv-scrolled .mhv-util{height:0;border-bottom-color:transparent}
.mhv-util .mhv-right{display:flex;align-items:center;gap:20px}
.mhv-util a{color:inherit;text-decoration:none}
.mhv-util a:hover{color:var(--mhv-ink)}
.mhv-util .mhv-right>*{position:relative}
.mhv-util .mhv-right>*:not(:first-child)::before{content:"";position:absolute;left:-10px;top:50%;
  transform:translateY(-50%);width:1px;height:13px;background:var(--mhv-hair)}
.mhv-util .mhv-loc,.mhv-util .mhv-wa{display:inline-flex;align-items:center;gap:7px}
.mhv-util .mhv-loc svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7}
.mhv-util .mhv-wa svg{width:15px;height:15px;fill:var(--mhv-wa);transition:opacity .2s}
.mhv-util .mhv-wa:hover svg{opacity:.65}

/* ---------- navbar: logo + menú pegados a la izquierda, acciones a la derecha ---------- */
.mhv-navbar{height:var(--mhv-nav-h);display:flex;align-items:center;
  gap:clamp(18px,3.4vw,56px);padding:0 var(--mhv-gutter)}
.mhv-brand{display:flex;align-items:center}
.mhv-brand img{max-height:38px;width:auto;display:block}

.mhv-menu{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);margin:0;padding:0;list-style:none}
.mhv-menu>li{list-style:none;position:relative}
.mhv-menu>li>a,.mhv-menu>li>button{display:flex;align-items:center;gap:7px;height:var(--mhv-nav-h);
  color:var(--mhv-ink-2);text-decoration:none;position:relative;white-space:nowrap;transition:color .18s;
  background:none!important;border:0!important;cursor:pointer;
  font-family:var(--mhv-body)!important;font-size:16px!important;font-weight:500!important;letter-spacing:0}
.mhv-menu>li>a:hover,.mhv-menu>li>button:hover{color:var(--mhv-ink)!important}
.mhv-menu .mhv-tag{position:absolute;top:14px;left:0;font-family:var(--mhv-label);font-size:8.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mhv-red-brand);pointer-events:none}
.mhv-menu>li>a::after,.mhv-menu>li>button::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:2px;
  background:var(--mhv-red-brand);transform:scaleX(0);transform-origin:left;transition:transform .22s}
.mhv-menu>li:hover>a::after,.mhv-menu>li:hover>button::after{transform:scaleX(1)}
.mhv-caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.5;transition:transform .22s;display:inline-block;margin-left:2px}
.mhv-menu>li:hover .mhv-caret{transform:rotate(-135deg) translateY(-2px)}

.mhv-mega{position:absolute;top:calc(var(--mhv-nav-h) - 8px);left:0;min-width:620px;background:var(--mhv-paper);
  border:1px solid var(--mhv-hair);padding:24px 26px;display:grid;grid-template-columns:1fr 1fr;gap:28px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;box-shadow:0 26px 50px rgba(17,20,24,.13)}
.mhv-menu>li:hover .mhv-mega,.mhv-menu>li:focus-within .mhv-mega{opacity:1;visibility:visible;transform:none}
.mhv-mega h4{margin:0 0 10px;font-family:var(--mhv-label);font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mhv-mute);font-weight:600}
.mhv-mega ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1px}
.mhv-mega li{list-style:none}
.mhv-mega li a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 10px;
  font-family:var(--mhv-label)!important;font-weight:600!important;font-size:13px!important;letter-spacing:.03em;
  transition:background .16s;color:inherit;text-decoration:none}
.mhv-mega li a:hover{background:var(--mhv-ground)}
.mhv-mega .mhv-brand-h{margin:0 0 8px;padding:0 10px 8px;border-bottom:1px solid var(--mhv-hair-2);
  font-family:var(--mhv-display);font-weight:700;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mhv-ink)}
.mhv-type{font-family:var(--mhv-label);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mhv-mute);white-space:nowrap}
.mhv-mega li a:hover .mhv-type{color:var(--mhv-red)}

.mhv-actions{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.mhv-burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none!important;border:0!important;cursor:pointer;padding:0}
.mhv-burger i{width:22px;height:2px;background:var(--mhv-ink);transition:.25s;display:block}
.mhv-sitehead.mhv-open .mhv-burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mhv-sitehead.mhv-open .mhv-burger i:nth-child(2){opacity:0}
.mhv-sitehead.mhv-open .mhv-burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- drawer móvil ---------- */
.mhv-drawer{position:fixed;inset:0;z-index:999998;background:var(--mhv-paper);overflow:auto;
  padding:calc(var(--mhv-nav-h) + var(--mhv-util-h) + 14px) var(--mhv-gutter) 48px;display:flex;flex-direction:column;
  transform:translateY(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.mhv-sitehead.mhv-open .mhv-drawer{transform:none}
/* el drawer se pinta ENCIMA del header (tapa la hamburguesa), así que necesita
   su propio botón de cierre visible — si no, solo se puede cerrar con Escape */
.mhv-drawer-close{position:fixed;top:calc(var(--mhv-util-h) + (var(--mhv-nav-h) - 40px)/2);right:var(--mhv-gutter);z-index:1
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:none!important;border:1px solid var(--mhv-hair)!important;border-radius:999px;cursor:pointer;color:var(--mhv-ink)}
.mhv-drawer-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.mhv-drawer a{font-family:var(--mhv-display)!important;font-weight:700!important;font-size:clamp(24px,6.5vw,34px)!important;
  padding:12px 0;border-bottom:1px solid var(--mhv-hair);color:inherit;text-decoration:none;display:block;text-align:center}
.mhv-drawer .mhv-sub{font-family:var(--mhv-body)!important;font-weight:500!important;font-size:16.5px!important;color:var(--mhv-mute);padding:9px 0;border:0;
  text-align:center;
  /* columna, no fila: si el nombre se parte en 2 líneas, la etiqueta (mhv-type)
     queda siempre abajo, nunca flotando a mitad del nombre */
  display:flex;flex-direction:column;align-items:center;gap:2px}
.mhv-drawer .mhv-sub .mhv-type{margin-top:1px}
.mhv-acc{border-bottom:1px solid var(--mhv-hair)}
.mhv-acc>button{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 0;text-align:center;
  background:none!important;border:0!important;cursor:pointer;color:inherit!important;
  font-family:var(--mhv-display)!important;font-weight:700!important;font-size:clamp(24px,6.5vw,34px)!important}
/* un plugin del sitio le pone color:#fff a botones con aria-expanded en :hover/:focus
   (mismo origen que el fondo rosado que ya blindamos arriba) — texto blanco
   invisible sobre el drawer blanco si no se refuerza explícito */
.mhv-acc>button:hover,.mhv-acc>button:focus{color:inherit!important}
.mhv-acc>button .mhv-caret{opacity:.45}
.mhv-acc.mhv-on>button .mhv-caret{transform:rotate(-135deg) translateY(-2px)}
.mhv-acc .mhv-panel{display:none;padding:2px 0 14px}
.mhv-acc.mhv-on .mhv-panel{display:block}
.mhv-acc .mhv-brand-h{font-family:var(--mhv-label)!important;font-size:12px!important;font-weight:600!important;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mhv-mute);margin:12px 0 2px;text-align:center}
.mhv-drawer .mhv-cta-row{display:flex;flex-direction:column;gap:10px;margin-top:28px}
/* los botones del drawer son <a>: hay que reponerles su propio formato de botón,
   si no heredarían el estilo de link grande de .mhv-drawer a */
.mhv-drawer .mhv-cta-row a{font-family:var(--mhv-body)!important;font-size:14.5px!important;font-weight:700!important;
  letter-spacing:.06em;text-transform:uppercase;padding:0 26px;border-bottom:0}

@media (max-width:1300px){.mhv-menu{display:none}.mhv-actions .mhv-btn{display:none!important}.mhv-burger{display:flex}}
@media (max-width:767px){
  .mhv-util .mhv-right{gap:16px}
  .mhv-util{font-size:12px;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){.mhv-sitehead *{animation-duration:.001ms!important;transition-duration:.001ms!important}}