/*
 * CraftnexAI subpages — mobile navigation drawer (service/about/pricing/etc.).
 * The panel DOM is built by site-header.js moving the existing nav inside;
 * on desktop it uses display:contents so .nav-wrap layout is untouched.
 * subpage-coherence.css fuerza el nav desktop con !important sin media query,
 * así que aquí las propiedades en disputa también llevan !important y esta
 * hoja debe cargarse DESPUÉS de site-header.css y subpage-coherence.css.
 */

.subnav-panel,.subnav-panel__scroll{display:contents}
.subnav-scrim,.subnav-language{display:none}

@media (max-width:1320px){
  :root{--subnav-top:76px}
  html.mobile-nav-open,body.mobile-nav-open{overflow:hidden;overscroll-behavior:none}
  body.mobile-nav-open{position:fixed;width:100%;touch-action:none}
  body.mobile-nav-open .site-header{position:fixed;top:0;right:0;left:0;z-index:90}
  .site-header{isolation:isolate}

  /* backdrop-filter crea un containing block para position:fixed — sin esto
     el panel/scrim quedan anclados al header en vez del viewport. En móvil
     se cambia el blur por fondo sólido. */
  body:not(.page-index) .site-header,
  body:not(.page-index) .site-header .nav-wrap{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;filter:none !important;transform:none !important;will-change:auto !important}
  body:not(.page-index) .site-header{background:linear-gradient(180deg,rgba(10,14,20,.97),rgba(10,14,20,.93)) !important}

  body:not(.page-index) .site-header .menu-toggle{position:relative;z-index:95;display:inline-flex !important;visibility:visible !important;width:46px;height:46px;margin-left:auto !important;flex:0 0 46px !important;align-items:center;justify-content:center;border:1px solid rgba(148,163,184,.18);border-radius:14px;color:#f4f7fb;background:linear-gradient(180deg,rgba(30,37,49,.96),rgba(17,22,31,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 30px -22px rgba(0,0,0,.9)}
  body:not(.page-index) .site-header .menu-toggle[aria-expanded="true"]{color:#d8fff2;border-color:rgba(45,212,191,.36);background:linear-gradient(180deg,rgba(18,64,57,.96),rgba(13,43,40,.98))}

  .subnav-scrim{position:fixed;z-index:80;inset:var(--subnav-top) 0 0;display:block;width:100%;margin:0;padding:0;border:0;border-radius:0;background:rgba(2,6,12,.72);-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s linear .25s;cursor:pointer}
  .site-header.is-menu-open .subnav-scrim{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}

  .subnav-panel{position:fixed;z-index:85;top:var(--subnav-top);right:0;bottom:0;display:flex;width:min(440px,100vw);height:calc(100vh - var(--subnav-top));height:calc(100dvh - var(--subnav-top));overflow:hidden;border-left:1px solid rgba(148,163,184,.14);background:radial-gradient(circle at 82% 4%,rgba(45,212,191,.12),transparent 36%),radial-gradient(circle at 8% 82%,rgba(125,211,252,.08),transparent 32%),linear-gradient(180deg,rgba(17,22,31,.995),rgba(10,14,21,.998));box-shadow:-30px 0 80px -42px rgba(0,0,0,.98);transform:translate3d(104%,0,0);visibility:hidden;pointer-events:none;transition:transform .34s cubic-bezier(.22,1,.36,1),visibility 0s linear .34s}
  .site-header.is-menu-open .subnav-panel{transform:translate3d(0,0,0);visibility:visible;pointer-events:auto;transition-delay:0s}
  .subnav-panel__scroll{position:relative;display:flex;flex:1;min-height:0;width:100%;flex-direction:column;gap:22px;padding:clamp(22px,4vh,38px) max(18px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

  /* Dentro del panel los enlaces son tarjetas en grilla y las acciones van
     ancladas abajo. !important: subpage-coherence fija el layout desktop. */
  body:not(.page-index) .site-header .subnav-panel .nav-links,
  body:not(.page-index) .site-header .subnav-panel .nav-links.is-open{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));position:static;order:0;width:100% !important;flex:none !important;gap:10px !important;margin:0 !important;padding:0 !important;overflow:visible;border:0;background:transparent;min-width:0 !important}
  body:not(.page-index) .site-header .subnav-panel .nav-links a{position:relative;display:flex !important;min-width:0;min-height:54px;width:auto !important;max-width:none;align-items:center;padding:13px 40px 13px 15px !important;overflow-wrap:anywhere;border:1px solid rgba(148,163,184,.12) !important;border-radius:16px !important;color:#d9e1ec !important;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.022)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025);font-size:.93rem !important;font-weight:680 !important;line-height:1.25 !important;text-align:left;text-shadow:none;white-space:normal !important}
  body:not(.page-index) .site-header .subnav-panel .nav-links a::after{content:"›";position:absolute;top:50%;right:15px;color:rgba(125,211,252,.72);font-size:1.25rem;font-weight:500;transform:translateY(-52%)}
  body:not(.page-index) .site-header .subnav-panel .nav-link-mobile-only{display:flex !important}

  body:not(.page-index) .site-header .subnav-panel .nav-actions,
  body:not(.page-index) .site-header .subnav-panel .nav-actions.is-open{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));position:static;order:0;width:100%;flex:none !important;gap:10px !important;margin-top:auto !important;padding:20px 0 0 !important;border-top:1px solid rgba(148,163,184,.12)}
  body:not(.page-index) .site-header .subnav-panel .nav-actions .nav-login,
  body:not(.page-index) .site-header .subnav-panel .nav-actions .btn-secondary,
  body:not(.page-index) .site-header .subnav-panel .nav-actions .btn{display:inline-flex !important;width:100% !important;min-width:0 !important;min-height:50px !important;height:auto !important;align-items:center !important;justify-content:center !important;margin:0 !important;padding:12px 14px !important;border-radius:16px !important;font-size:.9rem !important;line-height:1.2 !important;text-align:center;white-space:normal !important}
  body:not(.page-index) .site-header .subnav-panel .nav-actions .demo-cta-nav-primary{grid-column:1/-1;grid-row:1;min-height:54px !important;color:#04150e !important;border-color:transparent !important;background:linear-gradient(135deg,#2dd4bf,#7dd3fc) !important;box-shadow:0 18px 38px -22px rgba(45,212,191,.82) !important}
  body:not(.page-index) .site-header .subnav-panel .nav-actions .demo-cta-nav-primary::before,
  body:not(.page-index) .site-header .subnav-panel .nav-actions .demo-cta-nav-primary::after{display:none !important}

  /* Idioma dentro del drawer; la barra vieja "Access and language" se oculta
     en móvil (el toggle original sigue en el DOM para el click programático). */
  body:not(.page-index) .site-header .subnav-panel .subnav-language{display:inline-flex !important;align-items:center;gap:10px;width:100%;min-height:50px;margin:0;padding:12px 16px;border:1px solid rgba(45,212,191,.24);border-radius:16px;color:#d8fff2;background:rgba(45,212,191,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);font-size:.9rem;font-weight:700;cursor:pointer;text-align:left}
  .subnav-language svg{color:#7dd3fc;flex:0 0 auto}
  .subnav-language strong{font-size:.85rem;letter-spacing:.06em}
  .subnav-language span{color:#9fb2d8;font-weight:600}
  body:not(.page-index) .mobile-utility-toggle,
  body:not(.page-index) .utility-strip{display:none !important}

  body.mobile-nav-open .mobile-utility-toggle{visibility:hidden}
  body.mobile-nav-open .back-to-top,body.mobile-nav-open .cn-back-to-top{opacity:0 !important;visibility:hidden !important;pointer-events:none !important}
  body.mobile-nav-open #chatbot-container{opacity:0;visibility:hidden;pointer-events:none}

  .subnav-panel a:focus-visible,.subnav-panel button:focus-visible,.subnav-scrim:focus-visible{outline:3px solid rgba(125,211,252,.7);outline-offset:3px}
}

@media (max-width:400px){
  body:not(.page-index) .site-header .subnav-panel .nav-links,
  body:not(.page-index) .site-header .subnav-panel .nav-links.is-open{grid-template-columns:1fr;gap:8px !important}
  body:not(.page-index) .site-header .subnav-panel .nav-links a{min-height:48px;padding-block:11px !important}
  .subnav-panel__scroll{gap:16px;padding-top:18px}
}

@media (hover:hover) and (pointer:fine) and (max-width:1320px){
  body:not(.page-index) .site-header .subnav-panel .nav-links a:hover{color:#effffc !important;border-color:rgba(45,212,191,.3) !important;background:linear-gradient(180deg,rgba(45,212,191,.13),rgba(125,211,252,.06)) !important;box-shadow:inset 0 0 0 1px rgba(125,211,252,.08),0 16px 30px -22px rgba(45,212,191,.8) !important;text-shadow:none;transform:translateY(-1px)}
}

@media (hover:none),(pointer:coarse){
  body:not(.page-index) .site-header .subnav-panel .nav-links a:active{color:#effffc !important;border-color:rgba(45,212,191,.32) !important;background:rgba(45,212,191,.12) !important;transform:scale(.985)}
}

@media (prefers-reduced-motion:reduce){
  .subnav-panel,.subnav-scrim{transition-duration:.001ms!important}
}

@media (forced-colors:active){
  .subnav-panel,.subnav-panel .nav-links a{border:1px solid CanvasText}
  .subnav-panel a:focus-visible,.subnav-panel button:focus-visible{outline:3px solid Highlight}
}