/* ========================================================================
   NAVBAR FLOTANTE — estilo Kümmerlein adaptado a Molinos & Cía
   Prefijo .kb-  (namespace para no chocar con Bootstrap existente)
   ========================================================================= */

:root {
  /* Paleta Molinos — valores del manual de marca (#005e3d es el verde corporativo en site.css) */
  --kb-green-dark:  #005e3d;
  --kb-green-mid:   #007a4d;
  --kb-green-soft:  rgba(0, 94, 61, 0.10);
  --kb-pill-bg:     #f4fffd;
  --kb-pill-bg-alt: #f6f6f4;
  --kb-ink:         #0d3d27;
  --kb-ink-soft:    #3c3c3c;
  --kb-divider:     rgba(0, 77, 45, 0.15);

  /* Dimensiones */
  --kb-nav-y:       32px;
  --kb-content-pad: 48px;
  --kb-pill-h:      60px;
  --kb-radius:      15px;
  --kb-radius-sm:   8px;

  /* Tipografía */
  --kb-font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --kb-fz:   16px;
}

@media (max-width: 1280px) {
  :root { --kb-content-pad: 32px; }
}
@media (max-width: 768px) {
  :root { --kb-nav-y: 16px; --kb-content-pad: 16px; --kb-pill-h: 48px; }
}

/* Reset: site.css tiene 'header { position:sticky; height:80px; background:white }' para el header viejo.
   Lo neutralizamos aquí para que kb-header no herede esos estilos. */
header.kb-header,
header.kb-header.scrolled {
  background: transparent !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 0 !important;
  font-size: 0 !important;
  overflow: hidden !important;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  transition: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.kb-header { font-family: var(--kb-font); }

/* Reset Bootstrap: evita que sus estilos globales de 'a' y 'nav' afecten el pill */
.kb-pill a,
.kb-submenu a,
.kb-subsubmenu a,
.kb-mobile a {
  color: var(--kb-ink);
  text-decoration: none;
}
.kb-pill a:hover,
.kb-submenu a:hover,
.kb-subsubmenu a:hover,
.kb-mobile a:hover {
  color: var(--kb-green-dark);
  text-decoration: none;
}

/* ---------- Logo-card anclado al borde izquierdo ----------
   Contenedor rectangular blanco pegado al borde izquierdo (left:0) con la
   misma separación vertical que el pill (top: var(--kb-nav-y)). Esquinas
   derechas redondeadas para que se vea como una "card" cortada por el
   borde izquierdo de la pantalla.
*/
.kb-logo {
  position: fixed;
  top: var(--kb-nav-y);
  left: 0;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 14px 28px 14px 22px;
  border-radius: 0 var(--kb-radius) var(--kb-radius) 0;
  box-shadow: 0 2px 18px rgba(0,0,0,0.10);
  transition: background 0.3s ease, padding 0.3s ease, border-radius 0.35s ease;
  color: var(--kb-green-dark);
  text-decoration: none;
}

/* Tamaño del logo dentro del tab */
.kb-logo svg,
.kb-logo img {
  display: block;
  height: clamp(38px, 5vw, 62px);
  width: auto;
  object-fit: contain;
}

/* Variante para cuando el fondo detrás es oscuro */
.kb-logo.is-on-dark {
  background: var(--kb-green-dark);
  color: #ffffff;
}
.kb-logo.is-on-dark img {
  filter: brightness(0) invert(1);
}

/* ---------- Pill del menú (desktop) ---------- */
.kb-pill {
  position: fixed;
  top: var(--kb-nav-y);
  right: var(--kb-content-pad);
  height: var(--kb-pill-h);
  padding: 0 28px;
  background: var(--kb-pill-bg);
  border-radius: var(--kb-radius);
  display: flex;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 2px 18px rgba(0,0,0,0.10);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Lista de items */
.kb-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 16px);
}
.kb-menu__item { position: relative; }
.kb-menu__item > a {
  display: inline-block;
  color: var(--kb-ink);
  text-decoration: none;
  font-size: var(--kb-fz);
  font-weight: 500;
  line-height: 1;
  padding: 6px 10px;
  border-radius: var(--kb-radius-sm);
  transition: background 0.2s ease, color 0.2s ease;
  position: relative;
  white-space: nowrap;
}
.kb-menu__item > a:hover,
.kb-menu__item.is-active > a,
.kb-menu__item > a.nav-link--active {
  background: var(--kb-green-soft);
  color: var(--kb-green-dark);
}

/* Chevron del dropdown (desktop) — apunta hacia abajo */
.kb-menu__item.has-submenu > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kb-menu__item.has-submenu > a::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.8;
  transition: transform 0.25s ease;
}
.kb-menu__item.has-submenu:hover > a::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

/* Submenu */
/* Puente invisible que cubre el gap entre el item y el submenu.
   Sin esto, al mover el cursor de un link al dropdown se rompe el hover. */
.kb-submenu::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}

.kb-submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--kb-pill-bg);
  /* Esquinas superiores rectas para que se vea unido a la barra del navbar,
     sin la brecha/óvalo flotante que quedaba con el gap anterior. */
  border-radius: 0 0 var(--kb-radius) var(--kb-radius);
  padding: 12px 0;
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  list-style: none;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  /* Nivel 1: casi sin retardo al cerrar. El dropdown queda pegado al navbar
     (0 px de separacion), asi que el mouse nunca cruza un vacio al bajar
     hacia el y no hace falta el margen de gracia. Sin esto, al pasar de una
     opcion del navbar a otra el menu anterior quedaba ~500 ms en pantalla. */
  transition: opacity 0.15s ease 0.05s, transform 0.15s ease 0.05s;
}
.kb-submenu > li > a {
  display: block;
  padding: 11px 22px;
  color: var(--kb-ink);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.5;
  transition: background 0.15s ease, color 0.15s ease;
}
.kb-submenu > li > a:hover {
  background: var(--kb-green-soft);
  color: var(--kb-green-dark);
}
.kb-menu__item.has-submenu:hover > .kb-submenu,
.kb-menu__item.has-submenu:focus-within > .kb-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.15s ease 0s, transform 0.15s ease 0s;
}

/* ---------- Sub-sub-dropdown (flyout lateral) ----------
   Para árboles de 3 niveles (ej. Soluciones → "Por composición" → hojas):
   el item del nivel 2 muestra un chevron hacia la derecha y al hacer hover
   despliega un segundo dropdown a su derecha.
*/
.kb-submenu__item { position: relative; }
.kb-submenu__item > a {
  position: relative;
}

/* Ítems de submenú que no navegan (solo despliegan su subsubmenú): Soluciones */
.kb-submenu__noop,
.kb-mobile__noop {
  cursor: default;
}

/* Chevron "›" al lado derecho cuando el sub-item tiene hijos */
.kb-submenu__item.has-subsubmenu > a {
  padding-right: 34px;
}
.kb-submenu__item.has-subsubmenu > a::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-60%) rotate(-45deg);
  opacity: 0.7;
  transition: transform 0.2s ease;
}
.kb-submenu__item.has-subsubmenu:hover > a::after {
  transform: translateY(-60%) rotate(-45deg) translate(2px, 2px);
  opacity: 1;
}

.kb-subsubmenu::before {
  content: '';
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 100%;
}

.kb-subsubmenu {
  position: absolute;
  top: -12px;
  left: 100%;
  margin-left: 6px;
  background: var(--kb-pill-bg);
  border-radius: var(--kb-radius);
  padding: 12px 0;
  min-width: 220px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  /* Nivel 2: el retardo SE MANTIENE a proposito. Para llegar a este flyout el
     mouse cruza ~6 px de vacio y ademas se mueve en diagonal, saliendose del
     item padre; sin margen de gracia el menu se cerraria en el camino.
     No igualar este valor al del nivel 1. */
  transition: opacity 0.2s ease 0.3s, transform 0.2s ease 0.3s;
}
.kb-subsubmenu > li > a {
  display: block;
  padding: 11px 22px;
  color: var(--kb-ink);
  text-decoration: none;
  font-size: 15px;
  line-height: 1.5;
  transition: background 0.15s ease, color 0.15s ease;
}
.kb-subsubmenu > li > a:hover {
  background: var(--kb-green-soft);
  color: var(--kb-green-dark);
}
.kb-submenu__item.has-subsubmenu:hover > .kb-subsubmenu,
.kb-submenu__item.has-subsubmenu:focus-within > .kb-subsubmenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
}

/* Excepcion al margen de gracia: si el puntero sigue DENTRO del dropdown pero ya
   esta sobre otra opcion, no esta viajando hacia este flyout, asi que no hay nada
   que proteger y se cierra de inmediato. Sin esto, al recorrer el menu de arriba
   abajo el flyout anterior quedaba ~466 ms encima del nuevo; como cada uno tiene
   distinto alto, se veia como si la caja se redimensionara mas lento que el texto.
   El margen si se conserva al salir del dropdown hacia el flyout (el puntero cruza
   el hueco sobre .kb-subsubmenu::before, que mantiene el item en :hover). */
.kb-submenu:hover .kb-submenu__item:not(:hover) > .kb-subsubmenu {
  transition: opacity 0.12s ease 0s, transform 0.12s ease 0s;
}

/* ---------- Mobile: pill compacto + overlay fullscreen ---------- */
.kb-burger { display: none; }
.kb-mobile { display: none; }

@keyframes kb-overlay-in {
  0%   { opacity: 0; transform: scale(0.3); }
  40%  { opacity: 0; }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes kb-item-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1150px) {
  .kb-pill { display: none; }

  .kb-burger {
    position: fixed;
    top: var(--kb-nav-y);
    right: var(--kb-content-pad);
    width: var(--kb-pill-h);
    height: var(--kb-pill-h);
    padding: 0;
    background: #ffffff;
    border: 0;
    border-radius: var(--kb-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1001;
    box-shadow: 0 2px 14px rgba(0,0,0,0.06);
    transition: background 0.25s ease, box-shadow 0.25s ease;
  }
  .kb-burger__icon {
    position: relative;
    width: 22px; height: 14px;
    display: inline-block;
  }
  .kb-burger__icon > span {
    position: absolute; left: 0; right: 0; height: 2px;
    background: var(--kb-green-dark);
    border-radius: 2px;
    transition: transform .25s ease, top .25s ease;
  }
  .kb-burger__icon > span:nth-child(1) { top: 3px; }
  .kb-burger__icon > span:nth-child(2) { top: 9px; }
  .kb-burger[aria-expanded="true"] .kb-burger__icon > span:nth-child(1) {
    top: 6px; transform: rotate(45deg);
  }
  .kb-burger[aria-expanded="true"] .kb-burger__icon > span:nth-child(2) {
    top: 6px; transform: rotate(-45deg);
  }

  .kb-mobile {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    height: 60vh;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 0;
    overflow: hidden;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.3);
    transform-origin: top right;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  }

  /* Espacio fijo para el logo/burger — no scrollea */
  .kb-mobile::before {
    content: '';
    display: block;
    flex-shrink: 0;
    height: calc(var(--kb-nav-y) + var(--kb-pill-h) + 20px);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .kb-mobile { background: rgba(255, 255, 255, 0.99); }
  }

  .kb-mobile[data-open="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    animation: kb-overlay-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: none;
  }

  .kb-mobile[data-open="true"] .kb-mobile__list > li {
    animation: kb-item-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .kb-mobile[data-open="true"] .kb-mobile__list > li:nth-child(1)  { animation-delay:  80ms; }
  .kb-mobile[data-open="true"] .kb-mobile__list > li:nth-child(2)  { animation-delay: 140ms; }
  .kb-mobile[data-open="true"] .kb-mobile__list > li:nth-child(3)  { animation-delay: 200ms; }
  .kb-mobile[data-open="true"] .kb-mobile__list > li:nth-child(4)  { animation-delay: 260ms; }
  .kb-mobile[data-open="true"] .kb-mobile__list > li:nth-child(5)  { animation-delay: 320ms; }
  .kb-mobile[data-open="true"] .kb-mobile__list > li:nth-child(6)  { animation-delay: 380ms; }
  .kb-mobile[data-open="true"] .kb-mobile__list > li:nth-child(7)  { animation-delay: 440ms; }
  .kb-mobile[data-open="true"] .kb-mobile__list > li:nth-child(8)  { animation-delay: 500ms; }
  .kb-mobile[data-open="true"] .kb-mobile__list > li:nth-child(9)  { animation-delay: 560ms; }
  .kb-mobile[data-open="true"] .kb-mobile__list > li:nth-child(10) { animation-delay: 620ms; }

  /* Split: link a la izquierda, botón toggle a la derecha */
  .kb-mobile__split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
  }
  .kb-mobile__split > a {
    flex: 1;
    display: block;
    padding: 14px 8px 14px 4px;
    color: var(--kb-green-dark);
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
  }
  .kb-mobile__toggle {
    background: none;
    border: none;
    padding: 14px 8px;
    cursor: pointer;
    font-size: 20px;
    color: var(--kb-green-dark);
    line-height: 1;
    transition: transform 0.25s ease;
    flex-shrink: 0;
    transform: rotate(90deg);
  }
  .kb-mobile__split--sub .kb-mobile__toggle { padding: 8px; font-size: 16px; }

  /* Submenús ocultos por defecto — [hidden] tiene prioridad por !important */
  .kb-mobile__sub[hidden],
  .kb-mobile__subsub[hidden] { display: none !important; }

  .kb-mobile__list { list-style: none; margin: 0; padding: 0; }
  /* El ul es la zona scrolleable — el panel no scrollea */
  .kb-mobile .kb-mobile__list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 0 var(--kb-content-pad) 28px;
  }
  .kb-mobile .kb-mobile__list::-webkit-scrollbar { width: 5px; }
  .kb-mobile .kb-mobile__list::-webkit-scrollbar-track { background: transparent; }
  .kb-mobile .kb-mobile__list::-webkit-scrollbar-thumb {
    background: rgba(0, 94, 61, 0.25);
    border-radius: 3px;
  }
  .kb-mobile__list > li { position: relative; }
  .kb-mobile__list > li + li { border-top: 1px solid rgba(0, 77, 45, 0.12); }
  .kb-mobile__list > li > a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 4px 28px 4px 4px;
    color: var(--kb-green-dark);
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
  }
  .kb-mobile__list > li > a:hover { color: var(--kb-green-mid); }


  /* Sub-ítems anidados en mobile */
  .kb-mobile__sub { list-style: none; margin: 0 0 8px; padding: 4px 0 0 14px; }
  .kb-mobile__sub > li > a {
    display: block;
    position: relative;
    padding: 17px 6px 17px 20px;
    color: var(--kb-green-dark);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
  }
  .kb-mobile__sub > li > a::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background: var(--kb-green-dark);
    border-radius: 50%;
    opacity: 0.4;
  }
  .kb-mobile__sub > li > a:hover { color: var(--kb-green-mid); }

  /* 3er nivel en mobile */
  .kb-mobile__sub > li.has-subsub > a {
    padding: 17px 6px 17px 20px;
    color: var(--kb-green-dark);
    font-weight: 600;
    font-size: 15px;
  }
  .kb-mobile__subsub {
    list-style: none;
    margin: 0 0 6px;
    padding: 0 0 0 14px;
  }
  .kb-mobile__subsub > li > a {
    display: block;
    position: relative;
    padding: 14px 6px 14px 18px;
    color: var(--kb-green-dark);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
  }
  .kb-mobile__subsub > li > a::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: var(--kb-green-dark);
    border-radius: 50%;
    opacity: 0.3;
  }
  .kb-mobile__subsub > li > a:hover { color: var(--kb-green-mid); }
}

/* =====================================================================
   Estado "mobile menu abierto": panel glass se extiende y logo/X pierden
   su card blanca para fusionarse visualmente con la superficie de vidrio.
   ===================================================================== */
@media (max-width: 1150px) {
  html.kb-menu-open body { overflow: hidden; }

  html.kb-menu-open .kb-logo,
  html.kb-menu-open .kb-logo.is-on-dark {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    color: var(--kb-green-dark);
  }
  html.kb-menu-open .kb-logo img,
  html.kb-menu-open .kb-logo.is-on-dark img {
    filter: none;
  }

  html.kb-menu-open .kb-burger__icon > span {
    background: var(--kb-green-dark);
  }

  html.kb-menu-open .kb-burger {
    background: transparent;
    box-shadow: none;
  }

}