/*
 * SMARDIG — estilos móviles compartidos.
 * Se carga DESPUÉS del <style> de cada página. Todo va dentro de media queries:
 * en escritorio (> 900 px) no cambia nada.
 * Usa las variables de marca que define cada página (--bg, --line, --text, --muted, --lime).
 */

/* El botón del menú no existe en escritorio */
.nav-toggle{display:none;}

@media (max-width:900px){

  /* ---------- HEADER + MENÚ HAMBURGUESA (C2) ---------- */
  header{
    position:relative;
    z-index:50;
    gap:10px;
  }
  header > .btn{margin-left:auto;order:2;}

  .nav-toggle{
    order:3;
    display:inline-flex;align-items:center;justify-content:center;
    flex:none;
    width:44px;height:44px;
    padding:0;
    border:1px solid var(--line);
    border-radius:999px;
    background:transparent;
    color:var(--text);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-toggle:hover{border-color:var(--muted);}
  .nav-toggle-bars{position:relative;display:block;width:18px;height:12px;}
  .nav-toggle-bars span{
    position:absolute;left:0;right:0;height:2px;border-radius:2px;
    background:currentColor;
    transition:transform .25s ease, opacity .2s ease, top .25s ease;
  }
  .nav-toggle-bars span:nth-child(1){top:0;}
  .nav-toggle-bars span:nth-child(2){top:5px;}
  .nav-toggle-bars span:nth-child(3){top:10px;}
  header.nav-open .nav-toggle{border-color:var(--lime);color:var(--lime);}
  header.nav-open .nav-toggle-bars span:nth-child(1){top:5px;transform:rotate(45deg);}
  header.nav-open .nav-toggle-bars span:nth-child(2){opacity:0;}
  header.nav-open .nav-toggle-bars span:nth-child(3){top:5px;transform:rotate(-45deg);}

  /* Panel desplegable bajo el header */
  header.nav-open nav.links{
    display:flex;
    flex-direction:column;
    gap:0;
    position:absolute;
    top:100%;left:0;right:0;
    padding:6px clamp(20px,4vw,56px) 14px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(0,0,0,.55);
    font-size:16px;
    color:var(--text);
  }
  header.nav-open nav.links a{
    display:flex;align-items:center;
    min-height:48px;
    border-bottom:1px solid var(--line);
  }
  header.nav-open nav.links a:last-child{border-bottom:0;}
  header.nav-open nav.links a:hover,
  header.nav-open nav.links a:focus-visible{color:var(--lime);}

  /* ---------- ÁREAS TÁCTILES DE 44 PX (C3) ---------- */
  .btn{min-height:44px;}
  header a.logo{display:flex;align-items:center;min-height:44px;}
  .breadcrumb a,
  .footer-social a,
  .channel-value,
  .post-more,
  .article-foot a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .footer-social{gap:8px;}
  .footer-social a{padding:0 6px;}

  /* ---------- ESPACIO PARA LA BURBUJA DEL CHAT ---------- */
  /* Al llegar al final, el pie queda por encima de la burbuja de Dex.
     Usa las medidas de la burbuja definidas en dex-chat.css (+16 px de aire). */
  footer{
    padding-bottom:calc(var(--chat--window--bottom,20px) + var(--chat--toggle--size,60px) + 16px);
  }
}

/* Pantallas muy estrechas (320–380 px): el botón del header se compacta
   para que logo + "Agendar demo" + menú quepan en una línea */
@media (max-width:380px){
  header > .btn{padding:12px 14px;font-size:13px;}
}

@media (prefers-reduced-motion:reduce){
  .nav-toggle-bars span{transition:none;}
}