/* ckd-nav.css — estilos del menú agrupado. Lo carga _partials/header.php, así
   que llega a toda página sin importar su hoja de landing. Usa valores
   literales (no variables) para no chocar con las de cada hoja de página. */

#header .nav-link{ color:#11141f; font-weight:600; }
#header .nav-link:hover{ color:#5b6078; }
#header .nav-link.active, #header .nav-link.show{ color:#11141f; }
#header .nav-link.active::after{ background:#f97316; }

#header .btn-cta{
  --bs-btn-color:#1a0e00; --bs-btn-bg:#f97316; --bs-btn-border-color:#f97316;
  --bs-btn-hover-color:#1a0e00; --bs-btn-hover-bg:#ff8a3a; --bs-btn-hover-border-color:#ff8a3a;
  --bs-btn-active-color:#1a0e00; --bs-btn-active-bg:#e8650c; --bs-btn-active-border-color:#e8650c;
  color:#1a0e00; background:#f97316; border-color:#f97316;
}
#header .btn-cta:hover{ background:#ff8a3a; border-color:#ff8a3a; color:#1a0e00; }

.ckd-dd .dropdown-toggle::after{ margin-left:.4em; vertical-align:.15em; }
.ckd-dd-menu{
  border:1px solid #dcdfec; border-radius:12px; padding:.4rem; min-width:290px;
  box-shadow:0 14px 34px rgba(5,8,56,.14); margin-top:.5rem!important;
}
.ckd-dd-menu .dropdown-item{ border-radius:8px; padding:.6rem .8rem; white-space:normal; }
.ckd-dd-menu .dropdown-item strong{ display:block; font-weight:700; color:#11141f; }
.ckd-dd-menu .dropdown-item small{ display:block; color:#5b6078; font-size:.8rem; }
.ckd-dd-menu .dropdown-item:hover, .ckd-dd-menu .dropdown-item:focus{ background:#f5f6fb; }
.ckd-dd-menu .dropdown-item.active{ background:#f5f6fb; box-shadow:inset 3px 0 0 #f97316; }

/* ---------- Menú móvil (botón hamburguesa + panel lateral) ----------
   Antes no tenía estilos en ninguna hoja: el botón medía 16×6 px y casi no se veía. */
.mobile-menu-toggle{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:-8px;
  padding:0; border:0; border-radius:12px; background:transparent; color:#11141f; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:background-color 160ms ease, transform 160ms cubic-bezier(.23,1,.32,1);
}
.mobile-menu-toggle:active{ background:#f1f2f6; transform:scale(.96); }
.mobile-menu-toggle:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; }
.mobile-menu-toggle .hamburger{ position:relative; display:block; width:22px; height:16px; }
.mobile-menu-toggle .hamburger span{ position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor; }
.mobile-menu-toggle .hamburger span:nth-child(1){ top:0; }
.mobile-menu-toggle .hamburger span:nth-child(2){ top:7px; width:70%; }
.mobile-menu-toggle .hamburger span:nth-child(3){ top:14px; }

.mobile-nav-panel{ --bs-offcanvas-width:min(86vw, 360px); color:#11141f; }
.mobile-nav-panel .offcanvas-header{ padding:1rem 1.1rem 1rem 1.4rem; border-color:#eceef4!important; }
.mobile-nav-panel .offcanvas-title{ font-weight:800; font-size:1.05rem!important; margin:0; }
.mobile-nav-panel .offcanvas-body{ display:flex; flex-direction:column; }
.mobile-nav-menu ul{ margin:0; padding:.6rem .7rem; }
/* (prefijo .mobile-nav-panel .mobile-nav-menu: las hojas viejas tienen
   ".offcanvas .list-unstyled a{display:block;padding:10px 0}" y le ganaban) */
.mobile-nav-panel .mobile-nav-menu .mobile-nav-link{
  position:relative; display:flex; align-items:center; gap:.95rem; padding:.78rem .8rem; border-radius:12px;
  color:#11141f; text-decoration:none; font-weight:600; font-size:1rem; line-height:1.25;
  transition:background-color 160ms ease;
}
.mobile-nav-panel .mobile-nav-menu .mobile-nav-link i{ flex:none; width:1.3rem; text-align:center; font-size:1.12rem; color:#5b6078; }
.mobile-nav-panel .mobile-nav-menu .mobile-nav-link:hover,
.mobile-nav-panel .mobile-nav-menu .mobile-nav-link:active{ background:#f5f6fb; color:#11141f; }
.mobile-nav-panel .mobile-nav-menu .mobile-nav-item.active .mobile-nav-link{ background:#f5f6fb; }
.mobile-nav-panel .mobile-nav-menu .mobile-nav-item.active .mobile-nav-link::before{
  content:''; position:absolute; left:0; top:24%; bottom:24%; width:3px; border-radius:3px; background:#f97316;
}
.mobile-nav-panel .mobile-nav-menu .mobile-nav-item.active .mobile-nav-link i{ color:#f97316; }
/* separa servicios / herramientas / el resto */
.mobile-nav-item:nth-child(4), .mobile-nav-item:nth-child(7){ margin-bottom:.45rem; padding-bottom:.45rem; border-bottom:1px solid #eceef4; }
.mobile-nav-footer{ margin-top:auto; padding:1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px)); border-top:1px solid #eceef4; }
.mobile-nav-footer .btn{ border-radius:999px; background:#f97316; border-color:#f97316; color:#1a0e00; font-weight:700; }
.mobile-nav-footer .btn:hover, .mobile-nav-footer .btn:active{ background:#e8650c; border-color:#e8650c; color:#1a0e00; }
/* entrada escalonada de las opciones al abrir el panel */
@media (prefers-reduced-motion:no-preference){
  .mobile-nav-panel.showing .mobile-nav-item, .mobile-nav-panel.show .mobile-nav-item{ animation:ckd-nav-in 420ms cubic-bezier(.23,1,.32,1) both; }
  .mobile-nav-panel .mobile-nav-item:nth-child(2){ animation-delay:30ms; }
  .mobile-nav-panel .mobile-nav-item:nth-child(3){ animation-delay:60ms; }
  .mobile-nav-panel .mobile-nav-item:nth-child(4){ animation-delay:90ms; }
  .mobile-nav-panel .mobile-nav-item:nth-child(5){ animation-delay:120ms; }
  .mobile-nav-panel .mobile-nav-item:nth-child(6){ animation-delay:150ms; }
  .mobile-nav-panel .mobile-nav-item:nth-child(7){ animation-delay:180ms; }
  .mobile-nav-panel .mobile-nav-item:nth-child(8){ animation-delay:210ms; }
  .mobile-nav-panel .mobile-nav-item:nth-child(9){ animation-delay:240ms; }
  .mobile-nav-panel .mobile-nav-item:nth-child(10){ animation-delay:270ms; }
}
@keyframes ckd-nav-in{ from{ opacity:0; transform:translateX(-14px); } }

/* Tablet (768–991 px): el botón de cotización no cabía y bajaba a una segunda línea;
   ahí lo cubre el botón flotante "Cotizar" de la derecha. */
@media (min-width:768px) and (max-width:991.98px){
  #header .btn-cta{ display:none; }
}

/* Escritorio estrecho (768–1199 px): el menú cabe en una sola línea */
@media (min-width:768px) and (max-width:1199.98px){
  #header img[alt="Comercializadora Kadari"]{ width:150px; height:auto; }
  #header .nav-link{ padding-left:.45rem; padding-right:.45rem; font-size:.92rem; }
  #header .btn-cta{ padding:.5rem .8rem; font-size:.9rem; white-space:nowrap; }
}