:root{
  --ql-white: #ffffff;
  --ql-overlay: rgba(0,0,0,.82); /* un punto más transparente */
  --ql-maxw: 1200px;

  /* ✅ Tipografía del site (la que configuras en el theme) */
  --ql-font: "BeasusiteFit", "Clara", Arial, sans-serif;
}

/* ✅ Evitar desplazamiento horizontal (scroll lateral / “se corre” la web) */
html, body{
  width: 100%;
  max-width: 100%;
}
@supports (overflow-x: clip){
  html, body{ overflow-x: clip !important; }
}
@supports not (overflow-x: clip){
  html, body{ overflow-x: hidden !important; }
}
*, *::before, *::after{ box-sizing: border-box; }

/* HubSpot wrappers típicos (por si el theme usa 100vw en alguna sección) */
.row-fluid, .dnd-section, .body-container, .body-container-wrapper, .page-center{
  max-width: 100%;
}

/* NAV WRAPPER */
.ql-nav{
  width: 100%;
  left: 0;
  top: 0;
  position: absolute; /* si lo quieres fijo: fixed */
  z-index: 9999;

  font-family: var(--ql-font) !important;
}

/* Desktop layout */
.ql-nav__inner{
  max-width: var(--ql-maxw);
  margin: 0 auto;
  padding: 22px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* LOGO (sin animación, blindado) */
.ql-logo,
.ql-logo:hover,
.ql-logo:focus,
.ql-logo:active{
  text-decoration: none !important;
  border: 0 !important;
  outline: none !important;
}
.ql-logo::after{ content: none !important; }

.ql-logo,
.ql-logo img{
  transition: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.ql-logo img{
  display: block;
  height: auto;
  width: 150px;
  max-width: 150px;
}

/* MENU (desktop) */
.ql-menu{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
  flex: 1 1 auto;

  font-family: var(--ql-font) !important;
}

.ql-menu li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ql-menu li::marker{ content: ""; }

/* LINKS: blanco por defecto + tipografía correcta */
.ql-nav .ql-menu a{
  font-family: var(--ql-font) !important;
  font-weight: 400 !important;
  color: var(--ql-white) !important;
  text-decoration: none !important;

  font-size: 16px;
  line-height: 1;
  letter-spacing: .2px;
  padding: 8px 0;

  position: relative;
  display: inline-block;
  outline: none;
  white-space: nowrap;

  /* “volumen” sin cambiar weight real (evita que el layout se mueva) */
  transition: text-shadow 180ms ease;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* ✅ Subrayado BLANCO animado (izq -> der) */
.ql-nav .ql-menu a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 2px;
  width: 100%;
  background: var(--ql-white);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms ease;
}

.ql-nav .ql-menu a:hover::after,
.ql-nav .ql-menu a:focus-visible::after{
  transform: scaleX(1);
}

/* ✅ “Medio punto más” al hover sin desplazar: */
.ql-nav .ql-menu a:hover,
.ql-nav .ql-menu a:focus-visible{
  text-shadow: 0 0 0.85px currentColor;
}

/* BURGER */
.ql-burger{
  display: none;
  border: 0;
  background: transparent;
  padding: 10px;
  cursor: pointer;
  border-radius: 10px;
  margin-left: auto;
  z-index: 10001;
}
.ql-burger:focus-visible{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}
.ql-burger__bar{
  display: block;
  width: 26px;
  height: 2px;
  background: var(--ql-white);
  margin: 6px 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

/* MOBILE: logo centrado + margen real en menú */
@media (max-width: 860px){
  .ql-nav__inner{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 18px 18px;
  }

  .ql-logo{
    grid-column: 2;
    justify-self: center;
  }

  .ql-burger{
    display: inline-block;
    grid-column: 3;
    justify-self: end;
  }

  .ql-menu{
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    background: var(--ql-overlay);

    min-height: 100svh;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;

    /* ✅ Margen fuerte (se nota sí o sí) + safe area iPhone */
    padding-left: calc(env(safe-area-inset-left) + 64px) !important;
    padding-right: calc(env(safe-area-inset-right) + 28px) !important;
    padding-top: calc(env(safe-area-inset-top) + 24px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 24px) !important;

    overflow-x: hidden;

    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 220ms ease, transform 220ms ease;
  }

  @supports not (padding-left: calc(env(safe-area-inset-left) + 64px)) {
    .ql-menu{
      padding-left: 64px !important;
      padding-right: 28px !important;
      padding-top: 24px !important;
      padding-bottom: 24px !important;
    }
  }

  .ql-menu.is-open{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .ql-nav .ql-menu a{
    font-family: var(--ql-font) !important;
    font-weight: 400 !important;
    font-size: 20px;
    padding: 12px 0;
  }

  .ql-nav .ql-menu a::after{ bottom: -2px; }
}

/* BURGER -> X */
.ql-burger.is-open .ql-burger__bar:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.ql-burger.is-open .ql-burger__bar:nth-child(2){
  opacity: 0;
}
.ql-burger.is-open .ql-burger__bar:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ql-nav .ql-menu a,
  .ql-nav .ql-menu a::after,
  .ql-burger__bar,
  .ql-menu{
    transition: none !important;
  }
}